Cara menutup modal bootstrap twitter (setelah peluncuran awal)

Saya sangat pemula, jadi saya pikir saya mengawasi sesuatu (mungkin jelas) dengan modal bootstrap twitter. Apa yang saya coba lakukan adalah mendapatkan modal untuk meluncurkan hanya di seluler. Ini berfungsi dengan baik dengan menambahkan kelas .visible-phone pada modal div. Sejauh ini bagus. Tapi kemudian saya ingin ini berfungsi, artinya Anda dapat menutupnya dengan tombol X. Dan saya tidak bisa mengaktifkan tombolnya.

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

Di bagian bawah html saya meletakkan jquery.js (pertama) dan bootstrap.modal.js dan bootstrap.transition.js. Sebenarnya semua modul bootstrap js (jangan sampai ketinggalan termasuk). Saya tidak berpengalaman dengan js ..

Maafkan saya jika saya mengajukan pertanyaan Q yang sangat bodoh. Saya tidak dapat menemukan jawaban untuk situasi khusus ini di log.

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

Saya mengalami masalah saat menutup dialog modal bootstrap, jika dibuka dengan:

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

Saya memecahkan masalah ini dengan membuka dialog dengan tautan berikut:

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

Jangan lupa inisialisasi:

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

Saya juga menggunakan atribut berikut untuk tombol penutup:

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

Tambahkan kelas sembunyi ke modal

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

Kode 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') secara manual menyembunyikan modal. Gunakan kode berikut untuk menutup model bootstrap Anda

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

Lihat codepen yang berfungsi di sini

Atau

Coba di sini

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

Coba tentukan dengan tepat modal yang harus ditutup tombol dengan data-target. Jadi tombol Anda akan terlihat seperti berikut -

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

Selain itu, Anda hanya perlu bootstrap.modal.js sehingga Anda dapat menghapus yang lain dengan aman.

Sunting: jika ini tidak berhasil, hapus kelas ponsel yang terlihat dan uji di browser PC Anda, bukan di ponsel. Ini akan menunjukkan apakah Anda mendapatkan kesalahan javascript atau jika itu adalah masalah kompatibilitas misalnya.

Edit: Kode 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>

Menurut dokumentasi hide / toggle harus bekerja. Tapi ternyata tidak.

Inilah cara saya melakukannya

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

Coba ini ..

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

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

Saya memiliki masalah yang sama di iphone atau desktop, tidak berhasil menutup dialog saat menekan tombol tutup.

saya menemukan bahwa <button>tag mendefinisikan tombol yang dapat diklik dan diperlukan untuk menentukan atribut tipe untuk elemen sebagai berikut:

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

periksa kode contoh untuk modal bootstrap di: Halaman javascript BootStrap

Jika Anda memiliki sedikit modal yang ditampilkan secara bersamaan, Anda dapat menentukan modal target untuk tombol dalam modal dengan atribut data-toggledan 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>

Di suatu tempat di luar kode modal Anda dapat memiliki tombol sakelar lain:

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

Pengguna tidak dapat mengklik tombol sakelar dalam modal saat tombol ini tersembunyi dan berfungsi dengan benar dengan opsi "modal"untuk atribut data-toggle. Skema ini bekerja secara otomatis!

Berikut adalah potongan untuk tidak hanya menutup modal tanpa penyegaran halaman tetapi ketika menekan enter, ia mengirimkan modal dan menutup tanpa penyegaran

Saya sudah menyiapkannya di situs saya di mana saya dapat memiliki beberapa modals dan beberapa modals memproses data saat dikirim dan beberapa tidak. Apa yang saya lakukan adalah membuat ID unik untuk setiap modal yang melakukan pemrosesan. Misalnya di halaman web saya:

HTML (footer modal):

 <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;
      }
    });
});

Seperti yang Anda lihat, kiriman ini melakukan pemrosesan, itulah sebabnya saya memiliki jQuery ini untuk modal ini. Sekarang katakanlah saya memiliki modal lain dalam halaman web ini tetapi tidak ada pemrosesan yang dilakukan dan karena satu modal terbuka pada satu waktu saya meletakkan modal lain$(document).ready() dalam skrip php / js global yang didapat semua halaman dan saya memberikan tombol tutup modal kelas yang disebut ".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 (termasuk 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');
                    }
                }
         });
    });