Come chiudere la modalità bootstrap di Twitter (dopo l'avvio iniziale)

Sono molto un noob, quindi penso di supervisionare qualcosa (probabilmente ovvio) con il modal bootstrap di Twitter. Quello che sto cercando di fare è ottenere un modale da avviare solo su dispositivi mobili. Funziona bene aggiungendo la classe .visible-phone al div modale. Fin qui tutto bene. Ma poi voglio che funzioni, il che significa che puoi chiuderlo con il pulsante X. E non riesco a far funzionare il pulsante.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

In fondo all'html metto jquery.js (primo) e bootstrap.modal.js e bootstrap.transition.js. In realtà tutti i moduli js bootstrap (da non perdere un'inclusione). Non ho esperienza con js ..

Per favore perdonami se ho posto una Q davvero stupida. Non sono riuscito a trovare la risposta a questa situazione specifica nel registro.

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

Ho avuto problemi a chiudere la finestra di dialogo modale bootstrap, se è stata aperta con:

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

Ho risolto questo problema aprendo la finestra di dialogo dal seguente collegamento:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

Non dimenticare l'inizializzazione:

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

Ho anche usato i seguenti attributi per il pulsante di chiusura:

data-dismiss="modal" data-target="#myModal"

Aggiungi la classe hide al modal

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Codice Javascript

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

.modal ('hide') nasconde manualmente un modal. Usa il seguente codice per chiudere il tuo modello bootstrap

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

Dai un'occhiata al codepen funzionante qui

O

Prova qui

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Prova a specificare esattamente il modale che il pulsante dovrebbe chiudere con data-target. Quindi il tuo pulsante dovrebbe essere simile al seguente:

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

Inoltre, dovresti solo aver bisogno di bootstrap.modal.js in modo da poter rimuovere in sicurezza gli altri.

Modifica: se non funziona, rimuovi la classe del telefono visibile e testala sul browser del tuo PC anziché sul telefono. Questo mostrerà se stai ricevendo errori javascript o se si tratta di un problema di compatibilità, ad esempio.

Modifica: codice demo

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>

Secondo la documentazione, nascondere / attivare / disattivare dovrebbe funzionare. Ma non è così.

Ecco come l'ho fatto

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

Prova questo ..

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

Ho avuto lo stesso problema sull'iPhone o sul desktop, non sono riuscito a chiudere la finestra di dialogo premendo il pulsante di chiusura.

ho scoperto che il <button>tag definisce un pulsante cliccabile ed è necessario per specificare l'attributo type per un elemento come segue:

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

controlla il codice di esempio per le modali bootstrap su: BootStrap javascript Page

Se hai pochi modali mostrati simultaneamente, puoi specificare il modale di destinazione per il pulsante in-modale con attributi data-togglee data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

Da qualche parte al di fuori del codice modale puoi avere un altro pulsante di attivazione / disattivazione:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

L'utente non può fare clic sul pulsante di attivazione / disattivazione in-modale mentre questi pulsanti sono nascosti e funziona correttamente con l'opzione "modal"per l'attributo data-toggle. Questo schema funziona automaticamente!

Ecco uno snippet non solo per la chiusura delle modali senza aggiornamento della pagina, ma quando si preme invio invia modale e si chiude senza aggiornamento

L'ho impostato sul mio sito dove posso avere più modali e alcuni modali elaborano i dati al momento dell'invio e altri no. Quello che faccio è creare un ID univoco per ogni modale che esegue l'elaborazione. Ad esempio nella mia pagina web:

HTML (piè di pagina modale):

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY:

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

Come puoi vedere, questo invio esegue l'elaborazione, motivo per cui ho questo jQuery per questo modale. Ora diciamo che ho un altro modale all'interno di questa pagina web ma non viene eseguita alcuna elaborazione e poiché un modale è aperto alla volta ne metto un altro $(document).ready()in uno script php / js globale che tutte le pagine ottengono e do al pulsante di chiusura del modale una classe chiamata:".modal-close" ::

HTML:

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (includi global.inc):

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });