I try to open a modal but it does not work

4

Good day, I have a modal which when clicking on an image does not activate, the truth already check the code I can not find the error. The code I use is the same one that I had already used on another occasion but now it does not work for me. If you can help me, I would appreciate it.

This is in the view _layout.cshtml

<a href="javascript:;" onclick="showLogIn();">
    <img src="/Content/images/config.png" alt="Configurar Banner" title="Configurar Banner" />
</a>

And this is my modal:

<div class="modal fade fill-in" id="modalLogIn" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="pg-close"></i>
  </button>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header text-center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <img src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" alt="logo" data-src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" data-src-retina="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" width="250">
      </div>
      <div class="modal-body">
        <div align="justify">
          <div class="login-container bg-white">
            <div class="p-l-50 m-l-20 p-r-50 m-r-20 p-t-50 m-t-30 sm-p-l-15 sm-p-r-15 sm-p-t-40">
              <h5>Solo Personal Autorizado</h5>
              <fieldset>
                @Html.AntiForgeryToken()
                <div class="form-group form-group-default">
                  <label>CORREO ELECTRONICO: </label>
                  <div class="controls">
                    <input type="text" id="usuario" name="usuario" placeholder="ex. [email protected]" class="form-control" required />
                  </div>
                </div>
                <br />
                <div class="form-group form-group-default">
                  <label>CONTRASEÑA: </label>
                  <input type="password" id="contraseña" placeholder="Password" class="form-control" name="contraseña" required />
                </div>
                <br />
                <input type="submit" class="btn btn-primary btn-cons m-t-10" value="Ingresar" onclick="validar();" /><br /><br />
                <h4 id="msgError" class="text-danger bold font-montserrat"></h4>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->

And this is my function:

<script language="javascript">
    function showLogIn() {
    $("#modalLogIn").modal();
}
function abrirEnPestana(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}
function validar() {
    var usuario = document.getElementById("usuario").value;
    var contraseña = document.getElementById("contraseña").value;
    $.ajax({
        url: '@Url.Action("LogIn_Admin", "Inicio")',
        type: "POST",
        dataType: "json",
        data: {usuario:usuario, contraseña:contraseña},
        cache: false,
        success: function (result) {
            if (result) {
                //form.submitted = false;
                //form.submit();
                //window.location = "/Inicio/Vista_Admin_Banner"
                $('#modalLogIn').modal('hide');
                abrirEnPestana('@Url.Action("Vista_Admin_Banner", "Inicio")');
            } else {
                //form.submitted = false;
                $('#modalLogIn').modal('hide');
                $("#modalStickUpSmall").modal();
                //document.getElementById("msgError").innerHTML = "Error Usuario y/o Contraseña Incorrectos";
            }
        }
    });
}
</script>
    
asked by Amairani Fernanda 09.06.2017 в 16:08
source

5 answers

5

Very well, I've worked on your code, and what you're looking for is for the closure to do it from js.

As mentioned by my colleagues, added to the configuration of data-target="# modalLogIn" you can open it without losing your image.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a href="#" data-toggle="modal" data-target="#modalLogIn">
    <img src="/Content/images/config.png" alt="Configurar Banner" title="Configurar Banner" />
  </a>


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


Configuración del modal

    <div class="modal fade fill-in" id="modalLogIn" tabindex="-1" role="dialog" aria-hidden="true">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <i class="pg-close"></i>
      </button>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <img src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" alt="logo" data-src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" data-src-retina="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" width="250">
          </div>
          <div class="modal-body">
            <div align="justify">
              <div class="login-container bg-white">
                <div class="p-l-50 m-l-20 p-r-50 m-r-20 p-t-50 m-t-30 sm-p-l-15 sm-p-r-15 sm-p-t-40">
                  <h5>Solo Personal Autorizado</h5>
                  <fieldset>
                    @Html.AntiForgeryToken()
                    <div class="form-group form-group-default">
                      <label>CORREO ELECTRONICO: </label>
                      <div class="controls">
                        <input type="text" id="usuario" name="usuario" placeholder="ex. [email protected]" class="form-control" required />
                      </div>
                    </div>
                    <br />
                    <div class="form-group form-group-default">
                      <label>CONTRASEÑA: </label>
                      <input type="password" id="contraseña" placeholder="Password" class="form-control" name="contraseña" required />
                    </div>
                    <br />
                    <input type="submit" class="btn btn-primary btn-cons m-t-10" value="Ingresar" onclick="validar();" /><br /><br />
                    <h4 id="msgError" class="text-danger bold font-montserrat"></h4>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
      
    <script language="javascript">
        function showLogIn() {
        $("#modalLogIn").modal();
    }
    function abrirEnPestana(url) {
        var a = document.createElement("a");
        a.target = "_blank";
        a.href = url;
        a.click();
    }
    function validar() {
        var usuario = document.getElementById("usuario").value;
        var contraseña = document.getElementById("contraseña").value;
        $.ajax({
            url: '@Url.Action("LogIn_Admin", "Inicio")',
            type: "POST",
            dataType: "json",
            data: {usuario:usuario, contraseña:contraseña},
            cache: false,
            success: function (result) {
                if (result) {
                    //form.submitted = false;
                    //form.submit();
                    //window.location = "/Inicio/Vista_Admin_Banner"
                    //$('#modalLogIn').modal('hide');
                    $( ".close").click();
                    abrirEnPestana('@Url.Action("Vista_Admin_Banner", "Inicio")');
                } else {
                    //form.submitted = false;
                    //$('#modalLogIn').modal('hide');
                    $( ".close").click();
                    $("#modalStickUpSmall").modal();
                    //document.getElementById("msgError").innerHTML = "Error Usuario y/o Contraseña Incorrectos";
                }
            }
        });
    }
    </script>

 

<!-- begin snippet: js hide: false console: true babel: false -->

$ (".close"). click (); is the key, since this button executes the function data-dismiss="modal" which is the which is responsible for fade the modal, same that is configured in your html.

    
answered by 09.06.2017 / 17:34
source
2

    function showLogIn() {
    console.log("click")
        $("#modalLogIn").modal('show');
    }
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button onclick="showLogIn()"> Boton</button>
<div class="modal fade fill-in" id="modalLogIn" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="pg-close"></i>
  </button>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header text-center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <img src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" alt="logo" data-src="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" data-src-retina="http://www.vianney.com.mx/vianney/cenit/assets/img/logo.png" width="250">
      </div>
      <div class="modal-body">
        <div align="justify">
          <div class="login-container bg-white">
            <div class="p-l-50 m-l-20 p-r-50 m-r-20 p-t-50 m-t-30 sm-p-l-15 sm-p-r-15 sm-p-t-40">
              <h5>Solo Personal Autorizado</h5>
              <fieldset>
                @Html.AntiForgeryToken()
                <div class="form-group form-group-default">
                  <label>CORREO ELECTRONICO: </label>
                  <div class="controls">
                    <input type="text" id="usuario" name="usuario" placeholder="ex. [email protected]" class="form-control" required />
                  </div>
                </div>
                <br />
                <div class="form-group form-group-default">
                  <label>CONTRASEÑA: </label>
                  <input type="password" id="contraseña" placeholder="Password" class="form-control" name="contraseña" required />
                </div>
                <br />
                <input type="submit" class="btn btn-primary btn-cons m-t-10" value="Ingresar" onclick="validar();" /><br /><br />
                <h4 id="msgError" class="text-danger bold font-montserrat"></h4>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->

This should be your function:

<script language="javascript">
    function showLogIn() {
        $("#modalLogIn").modal('show');
    }
<script>
    
answered by 09.06.2017 в 16:19
1

Try removing onclick="showLogIn();" .

Leave it alone this way:

<a href="javascript:;" id="login">
  <img src="/Content/images/config.png" alt="Configurar Banner" title="Configurar Banner" />
</a>

Add a id to your modal example: loginmodal , and call it in your script like this:

$("#login").click(function () {
  $("#loginmodal").modal('show');
});
    
answered by 09.06.2017 в 17:14
1

According to the Bootstrap documentation , you can do it simply with:

<a href="#" data-toggle="modal" data-target="#modalLogIn">
    <img src="/Content/images/config.png" alt="Configurar Banner" title="Configurar Banner" />
</a>
    
answered by 09.06.2017 в 17:40
1

Hello, since you use boostrap is much easier without using JavaScript this can help you:

<p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a></p>

that way you can open a modal the idea is to use this:

data-toggle="modal" data-target="#login-modal"

in this way you will indicate that you are using a modal.

I'll give you an example so you can see its functionality:

/* #####################################################################
   #
   #   Project       : Modal Login with jQuery Effects
   #   Author        : Rodrigo Amarante (rodrigockamarante)
   #   Version       : 1.0
   #   Created       : 07/28/2015
   #   Last Change   : 08/02/2015
   #
   ##################################################################### */
   
@import url(http://fonts.googleapis.com/css?family=Roboto);

* {
    font-family: 'Roboto', sans-serif;
}

#login-modal .modal-dialog {
    width: 350px;
}

#login-modal input[type=text], input[type=password] {
	margin-top: 10px;
}

#div-login-msg,
#div-lost-msg,
#div-register-msg {
    border: 1px solid #dadfe1;
    height: 30px;
    line-height: 28px;
    transition: all ease-in-out 500ms;
}

#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
    border: 1px solid #68c3a3;
    background-color: #c8f7c5;
}

#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
    border: 1px solid #eb575b;
    background-color: #ffcad1;
}

#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
    width: 30px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}

#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
    background-color: #68c3a3 !important;
}

#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
    background-color: #eb575b !important;
}

#img_logo {
    max-height: 100px;
    max-width: 100px;
}

/* #########################################
   #    override the bootstrap configs     #
   ######################################### */

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .8;
}

.modal-content {
    background-color: #ececec;
    border: 1px solid #bdc3c7;
    border-radius: 0px;
    outline: 0;
}

.modal-header {
    min-height: 16.43px;
    padding: 15px 15px 15px 15px;
    border-bottom: 0px;
}

.modal-body {
    position: relative;
    padding: 5px 15px 5px 15px;
}

.modal-footer {
    padding: 15px 15px 15px 15px;
    text-align: left;
    border-top: 0px;
}

.checkbox {
    margin-bottom: 0px;
}

.btn {
    border-radius: 0px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

.btn-lg, .btn-group-lg>.btn {
    border-radius: 0px;
}

.btn-link {
    padding: 5px 10px 0px 0px;
    color: #95a5a6;
}

.btn-link:hover, .btn-link:focus {
    color: #2c3e50;
    text-decoration: none;
}

.glyphicon {
    top: 0px;
}

.form-control {
  border-radius: 0px;
}
<!-- BEGIN # BOOTSNIP INFO -->
<div class="container">
	<div class="row">
		<h1 class="text-center">Modal Login with jQuery Effects</h1>
        <p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a></p>
	</div>
</div>
<!-- END # BOOTSNIP INFO -->

<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    	<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" align="center">
					<img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
					</button>
				</div>
                
                <!-- Begin # DIV Form -->
                <div id="div-forms">
                
                    <!-- Begin # Login Form -->
                    <form id="login-form">
		                <div class="modal-body">
				    		<div id="div-login-msg">
                                <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-login-msg">Type your username and password.</span>
                            </div>
				    		<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
				    		<input id="login_password" class="form-control" type="password" placeholder="Password" required>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Remember me
                                </label>
                            </div>
        		    	</div>
				        <div class="modal-footer">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
                            </div>
				    	    <div>
                                <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                                <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
                            </div>
				        </div>
                    </form>
                    <!-- End # Login Form -->
                    
                    <!-- Begin | Lost Password Form -->
                    <form id="lost-form" style="display:none;">
    	    		    <div class="modal-body">
		    				<div id="div-lost-msg">
                                <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-lost-msg">Type your e-mail.</span>
                            </div>
		    				<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
            			</div>
		    		    <div class="modal-footer">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
                            </div>
                            <div>
                                <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
                                <button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
                            </div>
		    		    </div>
                    </form>
                    <!-- End | Lost Password Form -->
                    
                    <!-- Begin | Register Form -->
                    <form id="register-form" style="display:none;">
            		    <div class="modal-body">
		    				<div id="div-register-msg">
                                <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-register-msg">Register an account.</span>
                            </div>
		    				<input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
                            <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
                            <input id="register_password" class="form-control" type="password" placeholder="Password" required>
            			</div>
		    		    <div class="modal-footer">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
                            </div>
                            <div>
                                <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
                                <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
                            </div>
		    		    </div>
                    </form>
                    <!-- End | Register Form -->
                    
                </div>
                <!-- End # DIV Form -->
                
			</div>
		</div>
	</div>
    <!-- END # MODAL LOGIN -->

I realized that when trying the code here on the page does not work I do not know why but here is the boostrap link where you can reinforce what I am saying here Modal Boostrap

    
answered by 12.06.2017 в 18:43