Làm cách nào để ẩn phương thức Bootstrap với javascript?

Tôi đã đọc các bài đăng ở đây, trang web Bootstrap và được cho là như điên - nhưng không thể tìm thấy những gì tôi chắc chắn là một câu trả lời dễ dàng ...

Tôi có một phương thức Bootstrap mà tôi mở từ một người trợ giúp link_to như thế này:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

Trong ContactsController.createhành động của tôi , tôi có mã tạo ra Contactsau đó chuyển sang create.js.erb. Trong create.js.erb, tôi có một số mã xử lý lỗi (hỗn hợp ruby ​​và javascript). Nếu mọi thứ suôn sẻ, tôi muốn đóng phương thức.

Đây là nơi tôi gặp khó khăn. Tôi dường như không thể loại bỏ phương thức khi mọi việc suôn sẻ.

Tôi đã thử $('#myModal').modal('hide');và điều này không có kết quả. Tôi cũng đã thử $('#myModal').hide();làm cho phương thức loại bỏ nhưng rời khỏi bối cảnh.

Bất kỳ hướng dẫn về cách đóng chế độ và / hoặc loại bỏ phông nền từ bên trong create.js.erb?

Biên tập

Đây là đánh dấu cho myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

Với chế độ mở trong cửa sổ trình duyệt, hãy sử dụng bảng điều khiển của trình duyệt để thử

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

Nếu nó hoạt động (và phương thức đóng) thì bạn biết rằng Javascript gần của bạn không được gửi từ máy chủ đến trình duyệt một cách chính xác.

Nếu nó không hoạt động thì bạn cần điều tra thêm về khách hàng những gì đang xảy ra. Ví dụ: đảm bảo rằng không có hai phần tử có cùng id. Ví dụ, nó hoạt động lần đầu tiên sau khi tải trang nhưng không phải lần thứ hai?

Bảng điều khiển của trình duyệt: fireorms cho firefox, bảng điều khiển gỡ lỗi cho Chrome hoặc Safari, v.v.

để đóng phương thức bootstrap, bạn có thể chuyển 'ẩn' làm tùy chọn cho phương thức phương thức như sau

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

Xin hãy xem fiddle làm việc ở đây

bootstrap cũng cung cấp các sự kiện mà bạn có thể kết nối với chức năng phương thức , như nếu bạn muốn kích hoạt một sự kiện khi phương thức kết thúc bị ẩn khỏi người dùng, bạn có thể sử dụng sự kiện hidden.bs.modal bạn có thể đọc thêm về các phương thức và sự kiện phương thức ở đây trong Tài liệu

Nếu phương pháp trên không hoạt động, hãy đưa id vào nút đóng của bạn và kích hoạt nhấp vào nút đóng.

Tôi sử dụng Bootstrap 3.4 Đối với tôi điều này không hoạt động

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

Trong tuyệt vọng, tôi đã làm điều này:

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

Có thể nó không thanh lịch, nhưng nó hoạt động

Hình thức tốt nhất để ẩn và hiển thị một phương thức với bootstrap

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Tôi đã gặp phải lỗi tương tự và dòng mã này thực sự giúp tôi.

$("[data-dismiss=modal]").trigger({ type: "click" });

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

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

Tôi tìm thấy giải pháp chính xác bạn có thể sử dụng mã này

$('.close').click(); 

Tôi gặp phải những gì tôi tin là một vấn đề tương tự. Có $('#myModal').modal('hide');khả năng chạy qua chức năng đó và chạm vào dòng

if (!this.isShown || e.isDefaultPrevented()) return

Vấn đề là giá trị isShown có thể không được xác định ngay cả khi phương thức được hiển thị và giá trị phải là đúng. Tôi đã sửa đổi mã bootstrap một chút thành như sau

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Điều này dường như để giải quyết vấn đề cho hầu hết các phần. Nếu phông nền vẫn còn, bạn luôn có thể thêm một cuộc gọi để xóa thủ công sau cuộc gọi ẩn $('.modal-backdrop').remove();. Không lý tưởng chút nào nhưng không hoạt động.

(Tham khảo Bootstrap 3), Để ẩn phương thức sử dụng : $('#modal').modal('hide'). Nhưng lý do bối cảnh treo xung quanh (đối với tôi) là vì tôi đã phá hủy DOM cho phương thức trước khi 'ẩn' kết thúc.

Để giải quyết vấn đề này, tôi đã xâu chuỗi sự kiện ẩn bằng cách xóa DOM. Trong trường hợp của tôi:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

Tôi đã may mắn hơn khi thực hiện cuộc gọi sau khi cuộc gọi lại "hiển thị" xảy ra:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Điều này đảm bảo phương thức được tải xong trước khi cuộc gọi ẩn () được thực hiện.

Những gì chúng tôi tìm thấy là chỉ có một chút chậm trễ giữa cuộc gọi đến mã máy chủ của chúng tôi và sự trở lại cuộc gọi thành công trở lại. Nếu chúng tôi kết thúc cuộc gọi đến máy chủ trong $("#myModal").on('hidden.bs.modal', function (e)trình xử lý và sau đó gọi$("#myModal").modal("hide"); phương thức, trình duyệt sẽ ẩn phương thức và sau đó gọi mã phía máy chủ.

Một lần nữa, không thanh lịch nhưng chức năng.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Như bạn có thể thấy, khi myFuncđược gọi, nó sẽ ẩn phương thức và sau đó gọi mã phía máy chủ.

Tôi đã trải qua vấn đề tương tự, và sau một chút thử nghiệm tôi đã tìm thấy một giải pháp. Trong trình xử lý nhấp chuột của tôi, tôi cần phải ngăn sự kiện nổi lên, như vậy:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

Đây là tài liệu: http://getbootstrap.com/javascript/#modals-methods

Đây là phương thức: $ ('# myModal'). Modal ('ẩn')

Nếu bạn cần mở nhiều lần phương thức với nội dung khác nhau, tôi đề nghị thêm (trong bạn chính js):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Vì vậy, bạn sẽ làm sạch nội dung cho lần mở tiếp theo và tránh một loại bộ nhớ đệm

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

Ngay cả tôi cũng có loại vấn đề tương tự. Điều này đã giúp tôi rất nhiều

$("[data-dismiss=modal]").trigger({ type: "click" });

Tôi đã sử dụng mã đơn giản này:

$("#MyModal .close").click();

$('#modal').modal('hide');và các biến thể của nó không hoạt động với tôi trừ khi tôi có data-dismiss="modal"một thuộc tính trên nút Hủy. Giống như bạn, nhu cầu của tôi là có thể đóng / có thể - không đóng dựa trên một số logic bổ sung nên việc nhấp vào một liên kết data-dismiss="modal"hoàn toàn sẽ không làm được. Cuối cùng tôi đã có một nút ẩn data-dismiss="modal"mà tôi có thể lập trình gọi trình xử lý nhấp chuột từ đó, vì vậy

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

và sau đó bên trong trình xử lý nhấp để hủy khi bạn cần đóng chế độ bạn có thể có

$('#hidden-cancel').click();

Chúng ta cần phải chăm sóc bong bóng sự kiện. Cần thêm một dòng mã

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Tôi nhận ra đây là một câu hỏi cũ, nhưng tôi thấy rằng không ai trong số này thực sự là những gì tôi đang tìm kiếm chính xác. Nó dường như được gây ra bằng cách cố gắng đóng chế độ trước khi nó hiển thị xong.

Giải pháp của tôi dựa trên câu trả lời của @ schoonie23 nhưng tôi phải thay đổi một vài thứ.

Đầu tiên, tôi đã khai báo một biến toàn cục ở đầu tập lệnh của mình:

<script>
    var closeModal = false;
    ...Other Code...

Sau đó, trong mã phương thức của tôi:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Sau đó, điều này: (Lưu ý tên 'shows.bs.modal' chỉ ra rằng phương thức đã hiển thị hoàn toàn trái ngược với 'chương trình' kích hoạt khi sự kiện chương trình được gọi. (Ban đầu tôi chỉ thử 'hiển thị' nhưng nó không hoạt động. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Hy vọng điều này sẽ giúp ai đó nghiên cứu thêm một ngày nào đó. Tôi đã dành một chút để tìm kiếm một giải pháp trước khi tôi đưa ra điều này.

Tôi đã sử dụng mã này -

Ẩn modal với hiệu ứng mượt mà bằng cách sử dụng Fade Out.

$('#myModal').fadeOut();

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

$('.modal-open').css({'overflow': 'visible'});

Nếu bạn đang sử dụng lớp đóng trong các phương thức của mình, phần sau sẽ hoạt động. Tùy thuộc vào trường hợp sử dụng của bạn, tôi thường khuyên bạn chỉ lọc theo phương thức hiển thị nếu có nhiều hơn một phương thức với lớp đóng.

$('.close:visible').click();

document.getEuityById ('closeButton'). click (); // thêm thuộc tính data-notify = "modal" vào một phần tử trong phương thức và cung cấp cho nó id này

Đây là thực tế xấu nhưng bạn có thể sử dụng kỹ thuật này để đóng chế độ bằng cách gọi nút đóng trong javascript. Điều này sẽ đóng modal sau 3 giây.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

điều này có thể được thực hiện chỉ trong HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>