Έχω ένα bootstrap modal πλαίσιο διαλόγου που θέλω να εμφανίζεται αρχικά, και στη συνέχεια όταν ο χρήστης κάνει κλικ στη σελίδα, εξαφανίζεται. Έχω τα εξής: Έχω τα ακόλουθα: Το παράθυρο που εμφανίζεται στο παράθυρο είναι το εξής:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
Το modal εμφανίζεται αρχικά, αλλά δεν κλείνει όταν γίνεται κλικ έξω από το modal. Επίσης, η περιοχή περιεχομένου δεν είναι γκριζαρισμένη... Πώς μπορώ να κάνω το modal να εμφανίζεται αρχικά και στη συνέχεια να κλείνει αφού ο χρήστης κάνει κλικ εκτός της περιοχής; Και πώς μπορώ να κάνω το φόντο να είναι γκριζωπό όπως στο demo;
Βάλτε modal('toggle')
αντί για modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
για να κλείσετε το bootstrap modal μπορείτε να περάσετε το 'hide' ως επιλογή στη μέθοδο modal ως εξής
$('#modal').modal('hide');
Παρακαλώ ρίξτε μια ματιά στην εργασία [fiddle εδώ][2]
το bootstrap παρέχει επίσης γεγονότα που μπορείτε να συνδέσετε με τη λειτουργικότητα του modal, όπως αν θέλετε να πυροδοτήσετε ένα γεγονός όταν το modal έχει τελειώσει να κρύβεται από το χρήστη μπορείτε να χρησιμοποιήσετε το γεγονός hidden.bs.modal μπορείτε να διαβάσετε περισσότερα για τις μεθόδους και τα γεγονότα του modal εδώ στο Documentation
Αν καμία από τις παραπάνω μεθόδους δεν λειτουργεί, δώστε ένα id στο κουμπί close και ενεργοποιήστε το κλικ στο κουμπί close.
Τα πέντε σεντς μου σε αυτό το θέμα είναι ότι δεν θέλω να πρέπει να στοχεύσω το bootstrap modal με ένα id και βλέποντας ότι θα πρέπει να υπάρχει μόνο ένα modal κάθε φορά, το ακόλουθο θα πρέπει να είναι αρκετά επαρκές για να αφαιρέσετε το modal ως εναλλαγή θα μπορούσε να είναι επικίνδυνο:
$('.modal').removeClass('show');