Quiero abrir un modal cuando hago clic en un enlace.
Por desgracia, yo no podía cambiar el código HTML del enlace. Yo sólo podría cambiar el contenido de href.

Como este:

<a href="#Modal">Open modal</a>

No pude agregar datos de los atributos o cualquier otro HTML.

En la documentación que he encontrado una manera de abrir la modal a través de JavaScript. He añadido este código a mi sitio:

$('#Modal').modal();

Funciona, pero el modal que se abre inmediatamente después de la carga de la página.
La necesito para abrir después de que haga clic en el enlace.

Hay una manera de hacer esto?

Aquí está mi modal:

<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="ModalTitle">Modal Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                Content
            </div>
        </div>
    </div>
</div>
  • $('#Modal') se refiere a un elemento con id="Modal".
  • OK, yo podría agregar id="Modal" pero que doens no ayuda 🙁
  • Cray intenta esto ? stackoverflow.com/questions/11404711/…
  • intentado eso, pero ya no funciona
  • se puede agregar el html y js.
  • hecho, he añadido el código de mi modal

InformationsquelleAutor Cray | 2018-05-07

3 Comentarios

  1. 9

    Disparador de evento click en a[href$="#Modal"].

    JS:

    $('a[href$="#Modal"]').on( "click", function() {
       $('#Modal').modal('show');
    });

    HTML:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    
    <!-- Trigger the modal with a button -->
    <a href="#Modal" class="btn btn-info btn-lg">Open modal</a>
    <!-- Modal -->
    <div id="Modal" class="modal fade" 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>

    EIDT: se ha cambiado la myModal Modal

    • Eso es todo! Pero tuve que cambiar myModal Modal
  2. 2

    necesidad de que se abra después de que haga clic en el enlace.

    Así que usted necesitará para comprobar si hace clic en el enlace.

    jQuery ofrece muchas maneras para seleccionar un elemento. http://api.jquery.com/category/selectors/

    $('a[href$="#Modal"]').on( "click", function() {
       $('#Modal').modal();
    });`
  3. 0

    Probar este

    <!-- Trigger the modal with a button -->
    <a href="#" class="btn btn-info btn-lg">Open Modal</a>
    
    <!-- Modal -->
    <div id="myModal" class="modal fade" 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>
    
    
    $('a').on( "click", function() {
       $('#myModal').modal('show');
    });
    • como escribí en mi pregunta, yo no soy capaz de utilizar un botón o cambiar el html de mi enlace de la etiqueta
    • ok acabo de cambiar a la etiqueta

Dejar respuesta

Please enter your comment!
Please enter your name here