Chiudi Bootstrap Modal

Ho una finestra di dialogo modale bootstrap che voglio mostrare inizialmente, quindi quando l'utente fa clic sulla pagina, scompare. Ho il seguente:

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

Il modale viene visualizzato inizialmente, ma non si chiude quando si fa clic al di fuori del modale. Inoltre, l'area del contenuto non è disattivata. Come posso visualizzare inizialmente il modale, quindi chiudere dopo che l'utente ha fatto clic all'esterno dell'area? E come posso rendere grigio lo sfondo come nella demo?

Metti modal('toggle')invece dimodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

per chiudere il bootstrap modale puoi passare 'nascondi' come opzione al metodo modale come segue

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

Dai un'occhiata al violino di lavoro qui

bootstrap fornisce anche eventi che puoi agganciare alla funzionalità modale , come se vuoi lanciare un evento quando il modale ha finito di essere nascosto all'utente, puoi usare l' evento hidden.bs.modal puoi leggere di più sui metodi modali ed eventi qui in Documentazione

Se nessuno dei metodi sopra descritti funziona, dai un id al tuo pulsante di chiusura e fai clic sul pulsante di chiusura.

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

o

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

dovrebbe funzionare.

Ma se nient'altro funziona puoi chiamare direttamente il pulsante di chiusura modale:

$("#modal .close").click()

questo ha funzionato per me:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

usa questo link modale chiudi

$("#your-modal-id").modal('hide');

L'esecuzione di questa chiamata tramite classe ($(".my-modal"))non funzionerà.

Prova questo

$('#modal_id').modal('hide');

questo è abbastanza buono e funziona anche in angolare 2

$("#modal .close").click()

I miei cinque centesimi su questo è che non voglio dover indirizzare il bootstrap modale con un id e visto che dovrebbe esserci solo un modale alla volta, il seguente dovrebbe essere abbastanza sufficiente per rimuovere il modale poiché l'attivazione potrebbe essere pericolosa :

$('.modal').removeClass('show');

In alcune circostanze, digitare l'errore potrebbe essere il colpevole. Ad esempio, assicurati di avere:

data-dismiss="modal"

e non

data-dissmiss="modal"

Nota il doppio "ss" nel secondo esempio che causerà il fallimento del pulsante Chiudi.

Possiamo chiudere il pop-up modale nei seguenti modi:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

$('.modal.in').modal('hide');

usa il codice sopra per nascondere lo sfondo del modale se stai usando più pop modali in una pagina.

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

Puoi usare;

$('#' + $('.modal.show').attr('id')).modal('hide');

L'uso di modal.hide nasconderebbe solo il modale. Se si utilizza la sovrapposizione sotto il modale, sarebbe ancora lì. usa click call per chiudere effettivamente il modale e rimuovere l'overlay.

$("#modalID .close").click()

Un altro modo per farlo è che prima rimuovi la classe modal-open, che chiude il modale. Quindi rimuovi lo sfondo modale di classe che rimuove la copertina grigiastra del modale.

È possibile utilizzare il seguente codice:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Ho chiuso modalmente a livello di programmazione con questo trucco

Aggiungi un pulsante in modale con data-dismiss="modal"e nascondi il pulsante con display: none. Ecco come sarà

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Ora, quando si desidera chiudere a livello di programmazione, è sufficiente attivare un evento clic su quel pulsante, che non è visibile all'utente

In Javascript puoi attivare il clic su quel pulsante in questo modo:

document.getElementById('close-modal').click();

Questo codice ha funzionato perfettamente per me per chiudere un modale (sto usando bootstrap 3.3)

$('#myModal').removeClass('in')

Nel mio caso, la pagina principale da cui è stato attivato il bootstrap modale ha iniziato a non rispondere dopo aver utilizzato la $("#modal").modal('toggle');modalità, ma ha iniziato a rispondere nel modo seguente:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Funziona bene

$(function () {
   $('#modal').modal('toggle');
});

Tuttavia, quando hai più modali sovrapposti uno sopra l'altro non è efficace, quindi funziona

data-dismiss="modal"

Dopo alcuni test, ho scoperto che per il bootstrap modale è necessario attendere un po 'di tempo prima di eseguire l' $(.modal).modal('hide')esecuzione successiva $(.modal).modal('show'). E ho scoperto che nel mio caso ho bisogno di almeno 500 millisecondi di intervallo tra i due.
Quindi questo è il mio caso di test e la mia soluzione:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Puoi vedere questo riferimento ma se questo link è stato rimosso, leggi questa descrizione:

Chiama un modale con id myModal con una singola riga di JavaScript:

$('#myModal').modal(options)

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungi il nome dell'opzione a data- , come in data-background = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

metodi

Metodi e transizioni asincroni

Tutti i metodi API sono asincroni e avviano una transizione. Tornano al chiamante non appena inizia la transizione, ma prima che termini. Inoltre, una chiamata di metodo su un componente in transizione verrà ignorata.

Consulta la nostra documentazione JavaScript per ulteriori informazioni.

.modal (opzioni)

Attiva i tuoi contenuti come modali. Accetta un oggetto opzioni opzionale.

$('#myModal').modal({
   keyboard: false
})

.modal ( 'ginocchiera')

Attiva o disattiva manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato o nascosto (ovvero prima che si verifichi l'evento most.bs.modal o hidden.bs.modal).

$('#myModal').modal('toggle')

.modal ( 'show')

Apre manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato (cioè prima che si verifichi l'evento most.bs.modal).

$('#myModal').modal('show')

.modal ( 'nascondere')

Nasconde manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente nascosto (ovvero prima che si verifichi l'evento hidden.bs.modal).

$('#myModal').modal('hide')

.modal ( 'handleUpdate')

Regola manualmente la posizione del modale se l'altezza di un modale cambia mentre è aperta (cioè nel caso in cui appare una barra di scorrimento).

$('#myModal').modal('handleUpdate')

.modal ( 'dispose')

Distrugge il modale di un elemento.

eventi

La classe modale di Bootstrap espone alcuni eventi per collegarsi alla funzionalità modale. Tutti gli eventi modali vengono generati sul modale stesso (cioè sul **). Tipo Descrizione

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Inoltre, puoi "fare clic" su una "x", che chiude la finestra di dialogo. Per esempio:

$(".ui-dialog-titlebar-close").click();

Nel mio caso, ho usato un pulsante per mostrare il modale

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Quindi nel mio codice, per chiudere il modale (che ha l'id = 'my-modal-to-show') chiamo quella funzione (in dattiloscritto angolare):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Se chiamo $ (modalId) .modal ('hide') non funziona e non so perché

PS .: nel mio modale ho codificato anche quell'elemento pulsante con la classe .close

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

alcune volte la soluzione non funziona quindi dovresti rimuovere correttamente la classe in e aggiungere la visualizzazione css: nessuna manualmente.

$("#modal").removeClass("in");
$("#modal").css("display","none");