Ik ben nieuw bij Bootstrap en ik heb een probleem met dit voorbeeld:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">×</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>
Volgens mijn begrip zou het kenmerk data-dismiss="modal"
de modal moeten sluiten als je erop klikt, maar ik begrijp niet hoe het achter de schermen werkt. Ik heb de officiële documentatie gecontroleerd op: http://getbootstrap.com/javascript/#modals-examplesmaar er is geen uitleg.
Antwoord 1, autoriteit 100%
De verbergfunctie is op deze manier geïmplementeerd in de modal.js
.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Het is eigenlijk gewoon het vinden van de elementen die het attribuut data-dismiss
en de waarde modal
hebben. Door erop te klikken worden deze elementen verborgen.
Antwoord 2, autoriteit 44%
vervang data-dismiss="modal"
door: onclick="$('#modal_id').modal('hide');"
Je zou zoiets als dit moeten hebben:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');"
sluit alleen het specifieke modaal waarin het is geplaatst.
Let op of dit antwoord nuttig is.
Antwoord 3, autoriteit 24%
Als u meerdere modals op één pagina gebruikt, opent u tegelijkertijd boven elkaar door de bovenste te sluiten met data-dismiss="modal"
om alle actieve modals te verbergen.
Antwoord 4, autoriteit 16%
precies in bootstrap.js
zoek het element met attribuut data-dismiss="modal"
en activeer this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
achter. d.w.z. het verbergt het element, maar op een meer complexe manier.