Đóng chế độ Bootstrap

Tôi có một hộp thoại phương thức bootstrap mà tôi muốn hiển thị ban đầu, sau đó khi người dùng nhấp vào trang, nó sẽ biến mất. Tôi có những điều sau đây:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Phương thức được hiển thị ban đầu, nhưng nó không đóng khi nhấp vào bên ngoài phương thức. Ngoài ra, khu vực nội dung không bị mờ đi .. Làm cách nào tôi có thể hiển thị phương thức ban đầu, sau đó đóng sau khi người dùng nhấp vào bên ngoài khu vực? Và làm thế nào tôi có thể có được nền màu xám như trong bản demo?

Đặt modal('toggle')thay vìmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

để đó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 ở đây Tài liệu

Nếu không có phương pháp nào ở trên 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.

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

hoặc là

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

nên làm việc.

Nhưng nếu không có gì khác hoạt động, bạn có thể gọi trực tiếp nút đóng chế độ:

$("#modal .close").click()

điều này làm việc cho tôi:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

sử dụng phương thức liên kết này đóng

$("#your-modal-id").modal('hide');

Thực hiện cuộc gọi này qua lớp ($(".my-modal"))sẽ không hoạt động.

Thử cái này

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

cái này khá hay và nó cũng hoạt động ở góc 2

$("#modal .close").click()

Năm xu của tôi cho cái này là tôi không muốn phải nhắm mục tiêu phương thức bootstrap với một id và thấy rằng chỉ nên có một phương thức tại một thời điểm sau đây nên khá đủ để loại bỏ phương thức vì việc chuyển đổi có thể nguy hiểm :

$('.modal').removeClass('show');

Trong một số trường hợp, lỗi gõ có thể là thủ phạm. Ví dụ: đảm bảo bạn có:

data-dismiss="modal"

và không

data-dissmiss="modal"

Lưu ý "ss" kép trong ví dụ thứ hai sẽ khiến nút Đóng không thành công.

Chúng tôi có thể đóng cửa sổ bật lên theo phương thức sau:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

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

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

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

sử dụng đoạn mã trên để ẩn phông nền của phương thức nếu bạn đang sử dụng nhiều chế độ bật trong một trang.

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

bạn có thể dùng;

$('#' + $('.modal.show').attr('id')).modal('hide');

Sử dụng modal. Leather sẽ chỉ ẩn phương thức. Nếu bạn đang sử dụng lớp phủ bên dưới phương thức, nó sẽ vẫn ở đó. sử dụng cuộc gọi nhấp để thực sự đóng phương thức và loại bỏ lớp phủ.

$("#modalID .close").click()

Một cách khác để làm điều này là đầu tiên bạn loại bỏ lớp modal-open, nó đóng modal. Sau đó, bạn loại bỏ lớp nền modal loại bỏ lớp vỏ màu xám của phương thức.

Mã sau có thể được sử dụng:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Tôi đã đóng phương thức lập trình với thủ thuật này

Thêm một nút trong phương thức với data-dismiss="modal"và ẩn nút với display: none. Đây là cách nó sẽ trông như thế nào

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Bây giờ khi bạn muốn đóng chế độ theo chương trình, chỉ cần kích hoạt một sự kiện nhấp chuột vào nút đó, không hiển thị cho người dùng

Trong Javascript, bạn có thể kích hoạt nhấp vào nút đó như thế này:

document.getElementById('close-modal').click();

Mã này hoạt động hoàn hảo đối với tôi để đóng một phương thức (tôi đang sử dụng bootstrap 3.3)

$('#myModal').removeClass('in')

Trong trường hợp của tôi, trang chính từ đó phương thức bootstrap được kích hoạt bắt đầu không phản hồi sau khi sử dụng $("#modal").modal('toggle');, nhưng bắt đầu phản hồi theo cách sau:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Cái này hoạt động tốt

$(function () {
   $('#modal').modal('toggle');
});

Tuy nhiên, khi bạn có nhiều phương thức xếp chồng lên nhau, nó không hiệu quả, vì vậy thay vào đó, cách này hoạt động

data-dismiss="modal"

Sau một số thử nghiệm, tôi thấy rằng đối với phương thức bootstrap cần phải chờ một thời gian trước khi thực hiện $(.modal).modal('hide')sau khi thực hiện $(.modal).modal('show'). Và tôi tìm thấy trong trường hợp của mình, tôi cần khoảng thời gian ít nhất là 500 triệu giây giữa hai người.
Vì vậy, đây là trường hợp thử nghiệm và giải pháp của tôi:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Bạn có thể xem tài liệu tham khảo này nhưng nếu liên kết này đã bị xóa, hãy đọc mô tả này:

Gọi một phương thức với id myModal với một dòng JavaScript:

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

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data- , như trong data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Phương pháp

Phương pháp và chuyển tiếp không đồng bộ

Tất cả các phương thức API không đồng bộ và bắt đầu chuyển đổi. Họ quay trở lại người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.

.modal (tùy chọn)

Kích hoạt nội dung của bạn dưới dạng phương thức. Chấp nhận một đối tượng tùy chọn tùy chọn.

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

.modal ('chuyển đổi')

Tự tay bật một phương thức. Trả về cho người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn (tức là trước khi sự kiện được hiển thị.bs.modal hoặc hidden.bs.modal xảy ra).

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

.modal ('chương trình')

Tự mở một phương thức. Trả về cho người gọi trước khi phương thức thực sự được hiển thị (tức là trước khi sự kiện shows.bs.modal xảy ra).

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

.modal ('ẩn')

Thủ công giấu một phương thức. Trả về cho người gọi trước khi phương thức thực sự bị ẩn (tức là trước khi sự kiện hidden.bs.modal xảy ra).

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

.modal ('handleUpdate')

Điều chỉnh thủ công vị trí của phương thức nếu chiều cao của phương thức thay đổi trong khi nó đang mở (nghĩa là trong trường hợp thanh cuộn xuất hiện).

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

.modal ('vứt bỏ')

Phá hủy phương thức của một phần tử.

Sự kiện

Lớp phương thức của Bootstrap trưng bày một vài sự kiện để kết nối với chức năng phương thức. Tất cả các sự kiện phương thức được bắn vào chính phương thức (tức là tại **). Loại Mô tả

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Ngoài ra, bạn có thể "nhấp" vào 'x', đóng hộp thoại. Ví dụ:

$(".ui-dialog-titlebar-close").click();

Trong trường hợp của tôi, tôi đã sử dụng một nút để hiển thị phương thức

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Vì vậy, trong mã của tôi, để đóng phương thức (có id = 'my-modal-to-show') tôi gọi hàm đó (trong bản đánh máy Angular):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Nếu tôi gọi $ (modalId) .modal ('ẩn') thì nó không hoạt động và tôi không biết tại sao

PS.: Trong phương thức của tôi, tôi đã mã hóa phần tử nút đó bằng lớp .close

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

đôi khi giải pháp không hoạt động nên bạn phải xóa lớp trong và thêm màn hình css: không có thủ công.

$("#modal").removeClass("in");
$("#modal").css("display","none");