Cách đóng phương thức bootstrap twitter (sau khi khởi chạy lần đầu)

Tôi rất là một người yêu thích, vì vậy tôi nghĩ rằng tôi đang giám sát một cái gì đó (có thể là hiển nhiên) với phương thức twitter bootstrap. Những gì tôi đang cố gắng làm là có được một phương thức chỉ khởi chạy trên thiết bị di động. Điều này hoạt động tốt với việc thêm lớp .visible-phone trên div modal. Càng xa càng tốt. Nhưng sau đó tôi muốn nó hoạt động, nghĩa là bạn có thể đóng nó bằng nút X. Và tôi không thể làm cho nút hoạt động.

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

Ở cuối html, tôi đặt jquery.js (đầu tiên) và bootstrap.modal.js và bootstrap.transition.js. Trên thực tế, tất cả các mô-đun bootstrap js (không bỏ lỡ một phần bao gồm). Tôi không có kinh nghiệm với js ..

Xin hãy tha thứ cho tôi nếu tôi đặt câu hỏi Q. thực sự ngu ngốc Tôi không thể tìm thấy câu trả lời cho tình huống cụ thể này trong nhật ký.

$('#myModal').modal('hide') Hãy làm nó

Tôi đã gặp sự cố khi đóng hộp thoại phương thức bootstrap, nếu nó được mở bằng:

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

Tôi đã giải quyết sự cố này khi mở hộp thoại bằng liên kết sau:

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

Đừng quên khởi tạo:

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

Tôi cũng đã sử dụng các thuộc tính sau cho nút đóng:

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

Thêm lớp ẩn vào phương thức

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

Mã 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') ẩn một phương thức theo cách thủ công. Sử dụng mã sau để đóng mô hình bootstrap của bạn

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

Hãy xem codepen làm việc tại đây

Hoặc là

Thử ở đây

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

Hãy thử chỉ định chính xác phương thức mà nút sẽ đóng với data-target. Vì vậy, nút của bạn sẽ giống như sau:

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

Ngoài ra, bạn chỉ cần bootstrap.modal.js để có thể xóa những cái khác một cách an toàn.

Chỉnh sửa: nếu cách này không hiệu quả, hãy xóa lớp điện thoại hiển thị và kiểm tra nó trên trình duyệt PC của bạn thay vì điện thoại. Điều này sẽ cho biết liệu bạn có đang gặp lỗi javascript hoặc nếu nó là một vấn đề tương thích chẳng hạn.

Chỉnh sửa: Mã 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>

Theo documentaion ẩn / chuyển đổi sẽ hoạt động. Nhưng nó không.

Đây là cách tôi đã làm nó

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

Hãy thử điều này ..

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

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

Tôi đã gặp sự cố tương tự trong iPhone hoặc máy tính để bàn, không thể đóng hộp thoại khi nhấn nút đóng.

tôi phát hiện ra rằng <button>Thẻ xác định một nút có thể nhấp và cần thiết để chỉ định thuộc tính type cho một phần tử như sau:

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

kiểm tra mã ví dụ cho các phương thức bootstrap tại: Trang javascript BootStrap

Nếu bạn có một vài phương thức được hiển thị đồng thời, bạn có thể chỉ định phương thức đích cho nút trong phương thức với các thuộc tính data-togglevà 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>

Ở đâu đó bên ngoài mã phương thức, bạn có thể có một nút chuyển đổi khác:

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

Người dùng không thể nhấp vào nút chuyển đổi trong phương thức khi nút này bị ẩn và nó hoạt động đúng với tùy chọn "modal"cho thuộc tính data-toggle. Đề án này hoạt động tự động!

Đây là một đoạn mã không chỉ đóng các phương thức mà không làm mới trang mà khi nhấn enter, nó sẽ gửi phương thức và đóng mà không làm mới

Tôi đã thiết lập nó trên trang web của mình, nơi tôi có thể có nhiều phương thức và một số phương thức xử lý dữ liệu khi gửi và một số thì không. Những gì tôi làm là tạo một ID duy nhất cho mỗi phương thức xử lý. Ví dụ trong trang web của tôi:

HTML (chân trang phương thức):

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

Như bạn có thể thấy, gửi này thực hiện xử lý, đó là lý do tại sao tôi có jQuery này cho phương thức này. Bây giờ, giả sử tôi có một phương thức khác trong trang web này nhưng không có quá trình xử lý nào được thực hiện và vì một phương thức được mở tại một thời điểm nên tôi đặt một phương thức khác $(document).ready()vào tập lệnh php / js toàn cục mà tất cả các trang đều nhận được và tôi cung cấp cho nút đóng của phương thức một lớp có tên ".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 (bao gồm 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');
                    }
                }
         });
    });