วิธีรับ twitter bootstrap modal เพื่อปิด (หลังจากเปิดตัวครั้งแรก)

Question 1

ฉันเป็น noob มากดังนั้นฉันคิดว่าฉันกำลังดูแลบางสิ่งบางอย่าง (อาจชัดเจน) ด้วยรูปแบบ twitter bootstrap สิ่งที่ฉันกำลังพยายามทำคือสร้างโมดอลเพื่อเปิดใช้งานบนมือถือเท่านั้น ใช้งานได้ดีกับการเพิ่มคลาส .visible-phone บน modal div จนถึงตอนนี้ดีมาก แต่ฉันต้องการให้มันใช้งานได้หมายความว่าคุณสามารถปิดได้ด้วยปุ่ม X และฉันไม่สามารถทำให้ปุ่มทำงานได้

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

ที่ด้านล่างของ html ฉันใส่ jquery.js (ตัวแรก) และ bootstrap.modal.js และ bootstrap.transition.js จริงๆแล้วโมดูล bootstrap js ทั้งหมด (ไม่ควรพลาดรวม) ฉันไม่มีประสบการณ์กับ js ..

โปรดยกโทษให้ฉันด้วยถ้าฉันทำคำถามโง่ ๆ จริงๆฉันไม่พบคำตอบสำหรับสถานการณ์เฉพาะนี้ในบันทึก

Question 2

$('#myModal').modal('hide') ควรทำ

Question 3

ฉันมีปัญหาในการปิดกล่องโต้ตอบโมดอล bootstrap หากเปิดด้วย:

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

ฉันแก้ไขปัญหานี้โดยเปิดกล่องโต้ตอบตามลิงค์ต่อไปนี้:

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

อย่าลืมการเริ่มต้น:

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

ฉันยังใช้แอตทริบิวต์ต่อไปนี้สำหรับปุ่มปิด:

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

Question 4

เพิ่มคลาสซ่อนลงในโมดอล

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

รหัส 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>

Question 5

.modal ('hide')ซ่อนโมดอลด้วยตนเอง ใช้รหัสต่อไปนี้เพื่อปิดโมเดล bootstrap ของคุณ

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

ดูรหัสการทำงานที่นี่

หรือ

ลองดูที่นี่

แสดงข้อมูลโค้ด

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

ขยายข้อมูลโค้ด

Question 6

ลองระบุโมดอลที่ปุ่มควรปิดด้วย data-target ดังนั้นปุ่มของคุณควรมีลักษณะดังนี้ -

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

นอกจากนี้คุณควรต้องใช้ bootstrap.modal.js เท่านั้นเพื่อให้คุณสามารถลบสิ่งอื่น ๆ ได้อย่างปลอดภัย

แก้ไข: หากไม่ได้ผลให้ลบคลาสโทรศัพท์ที่มองเห็นได้และทดสอบบนเบราว์เซอร์พีซีของคุณแทนโทรศัพท์ สิ่งนี้จะแสดงว่าคุณได้รับข้อผิดพลาดของจาวาสคริปต์หรือปัญหาความเข้ากันได้เช่น

แก้ไข: รหัสสาธิต

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

Question 7

ตามเอกสารการซ่อน / สลับควรใช้งานได้ แต่มันไม่

นี่คือวิธีที่ฉันทำ

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

Question 8

ลองดูสิ ..

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

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

Question 9

ฉันมีปัญหาเดียวกันใน iphone หรือเดสก์ท็อปไม่สามารถปิดกล่องโต้ตอบเมื่อกดปุ่มปิด

ฉันพบว่า<button>แท็กกำหนดปุ่มที่คลิกได้และจำเป็นต้องระบุแอตทริบิวต์ type สำหรับองค์ประกอบดังต่อไปนี้:

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

ตรวจสอบโค้ดตัวอย่างสำหรับ modals bootstrap ที่: BootStrap javascript Page

Question 10

หากคุณมีโมดอลไม่กี่ตัวที่แสดงพร้อมกันคุณสามารถระบุโมดอลเป้าหมายสำหรับปุ่มในโมดอลพร้อมแอตทริบิวต์data-toggleและ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>

ที่อื่นนอกรหัสโมดอลคุณสามารถมีปุ่มสลับอื่น:

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

ผู้ใช้ไม่สามารถคลิกปุ่มสลับในโมดอลในขณะที่ปุ่มเหล่านี้ซ่อนอยู่และปุ่มเหล่านี้จะทำงานร่วมกับตัวเลือก"modal"สำหรับแอตทริบิวต์data-toggleได้อย่างถูกต้อง โครงการนี้ใช้งานได้โดยอัตโนมัติ!

Question 11

นี่คือตัวอย่างที่ไม่เพียง แต่ปิดโมดอลโดยไม่รีเฟรชเพจ แต่เมื่อกด Enter มันจะส่งโมดอลและปิดโดยไม่รีเฟรช

ฉันได้ตั้งค่าไว้ในไซต์ของฉันซึ่งฉันสามารถมีโมดอลได้หลายแบบและโมดอลบางตัวประมวลผลข้อมูลในการส่งและบางส่วนไม่ทำ สิ่งที่ฉันทำคือสร้าง ID เฉพาะสำหรับแต่ละโมดอลที่ประมวลผล ตัวอย่างเช่นในหน้าเว็บของฉัน:

HTML (ส่วนท้ายของโมดอล):

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

ดังที่คุณเห็นการส่งนี้ดำเนินการประมวลผลซึ่งเป็นสาเหตุที่ฉันมี jQuery นี้สำหรับโมดอลนี้ สมมติว่าฉันมีโมดอลอื่นในหน้าเว็บนี้ แต่ไม่มีการประมวลผลใด ๆ และเนื่องจากโมดอลหนึ่งเปิดขึ้นในแต่ละครั้งฉันจึงใส่อีกอัน$(document).ready()ในสคริปต์ php / js ส่วนกลางที่ทุกเพจได้รับและฉันให้ปุ่มปิดของโมดอลเป็นคลาสที่เรียกว่า:".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 (รวม 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');
                    }
                }
         });
    });