5

Buen día, tengo un modal el cual al hacer click en una imagen no se activa, la verdad ya revise el código no encuentro el error. El código que uso es el mismo que ya había usado en otra ocasión pero ahora no me funciona. Si me pueden ayudar lo agradecería.

Esto esta en la vista _layout.cshtml

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

Y este es mi 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 -->

Y esta es mi función:

<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>
11
  • Debe ser $("#modalLogIn").modal("show");
    – Simon
    Commented el 9 jun. 2017 a las 14:17
  • El código está bien, algo más debe estar provocando la falla. ¿Qué te muestra la consola al dar click en la imagen?
    – Gerry
    Commented el 9 jun. 2017 a las 14:43
  • @Xique en el script de la función Commented el 9 jun. 2017 a las 14:48
  • @Gerry a que te refieres con que me muestra? Commented el 9 jun. 2017 a las 14:48
  • 1
    Por cierto, no relacionado con el error, pero te falta un </div> al final de tu modal.
    – Gerry
    Commented el 9 jun. 2017 a las 14:50

5 respuestas 5

5

Muy bien, eh trabajado sobre tu código, y lo que buscas es que el cierre lo haga desde js.

Como mencionaron mis colegas, agregado a a la configuración de data-target="#modalLogIn" podrás abrirlo sin perder tú imagen.

<!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(); es la clave, ya que este botón ejecuta la función data-dismiss="modal" que es la que se encarga de desvanecer el modal, misma que esta configurado en tu html.

1
  • y con esto ya no genero un script? Commented el 9 jun. 2017 a las 15:40
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 -->

Así debería ser tu function :

<script language="javascript">
    function showLogIn() {
        $("#modalLogIn").modal('show');
    }
<script>
4
  • ya lo he intentado de esta forma pero no me funciona Commented el 9 jun. 2017 a las 14:29
  • y con toggle ? $("#modalLogIn").modal('toggle'); Commented el 9 jun. 2017 a las 14:32
  • 1
    @LuisAngelMezaPerez "</script>"
    – Antonio
    Commented el 9 jun. 2017 a las 14:53
  • No es necesario utilizar .modal('show');, ese es el valor por defecto de modal: documentación
    – Gerry
    Commented el 9 jun. 2017 a las 14:55
1

Prueba eliminando onclick="showLogIn();".

Déjalo solo de esta manera:

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

Agrégale un id a tu modal ejemplo: loginmodal, y llámalo en tu script así:

$("#login").click(function () {
  $("#loginmodal").modal('show');
});
2
  • ya lo había probado de esta manera y tampoco Commented el 9 jun. 2017 a las 15:20
  • .modal('show'); y .modal(); dan el mismo resultado; referencia aquí.
    – Gerry
    Commented el 9 jun. 2017 a las 15:28
1

De acuerdo a la documentación de Bootstrap, puedes hacerlo simplemente con:

<a href="#" data-toggle="modal" data-target="#modalLogIn">
    <img src="/Content/images/config.png" alt="Configurar Banner" title="Configurar Banner" />
</a>
2
  • si esa es la Via data attributes, pero como el usaba un javascript... Commented el 9 jun. 2017 a las 16:09
  • 1
    Hay que buscar por todos los caminos posibles, ¿no lo crees? ;) Commented el 9 jun. 2017 a las 17:01
1

Hola ya que usas boostrap es mucho mas facil sin necesidad de usar JavaScript esto te puede ayudar:

<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>

de esa manera podras abrir un modal la idea es usar esto:

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

de esta manera indicaras que estas usando un modal.

Te dejare un ejemplo para que veas su funcionalidad:

/* #####################################################################
   #
   #   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 -->

me he dado cuenta que al momento de probar el codigo aqui en la pagina no funciona no se porque pero aqui esta el link de boostrap donde puede reforzar lo que te estoy diciendo aqui Modal Boostrap

6
  • Nota: el codigo no funciona en la pagina y no se porque: Ver el link que deje. ami me funciona ese metodo Commented el 12 jun. 2017 a las 16:45
  • no agregue los efectos porque no son necesarios Commented el 12 jun. 2017 a las 16:45
  • gracias, deja lo checo :D Commented el 12 jun. 2017 a las 16:46
  • @AmairaniFernanda debes tener un poco de cuidado con boostrap varias librerias a la ves pueden hacer un grave daño, yo uso boostrap por eso te lo digo :3 Commented el 12 jun. 2017 a las 16:55
  • si, muchas gracias :) Commented el 12 jun. 2017 a las 16:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.