ปิด Bootstrap Modal

ฉันมีกล่องโต้ตอบ modal bootstrap ที่ฉันต้องการแสดงเริ่มแรกจากนั้นเมื่อผู้ใช้คลิกที่หน้ามันจะหายไป ฉันมีดังต่อไปนี้:

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

คำกริยาจะปรากฏขึ้นครั้งแรก แต่จะไม่ปิดเมื่อคลิกที่ด้านนอกของคำกริยา นอกจากนี้พื้นที่เนื้อหาไม่ได้เป็นสีเทา .. ฉันจะทำให้ modal แสดงได้อย่างไรจากนั้นปิดหลังจากที่ผู้ใช้คลิกนอกพื้นที่? และฉันจะทำให้พื้นหลังเป็นสีเทาเหมือนในตัวอย่างได้อย่างไร

ใส่modal('toggle')แทนmodal(toggle)

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

เพื่อปิด bootstrap modalคุณสามารถส่ง'hide'เป็นตัวเลือกให้กับ modal method ดังต่อไปนี้

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

โปรดดูซอทำหน้าที่ที่นี่

bootstrap ยังมีกิจกรรมที่คุณสามารถขอเข้าฟังก์ชั่นmodal ได้เช่นถ้าคุณต้องการเริ่มต้นเหตุการณ์เมื่อ modal เสร็จสิ้นการซ่อนจากผู้ใช้คุณสามารถใช้hidden.bs.modal event คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธี modal และกิจกรรมที่นี่ในเอกสาร

หากวิธีการข้างต้นไม่ทำงานให้รหัสไปที่ปุ่มปิดของคุณแล้วคลิกที่ปุ่มปิด

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

หรือ

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

ควรทำงาน.

แต่ถ้าไม่มีสิ่งใดที่ใช้งานได้คุณสามารถเรียกปุ่มปิด modal โดยตรง

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

สิ่งนี้ใช้ได้กับฉัน:

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

ใช้ลิงค์นี้เป็นกิริยาช่วยปิด

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

การเรียกสายนี้ผ่านคลาส($(".my-modal"))จะไม่ทำงาน

ลองสิ่งนี้

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

อันนี้ค่อนข้างดีและมันยังทำงานในเชิงมุม 2

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

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

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

ในบางกรณีการพิมพ์ผิดพลาดอาจเป็นสาเหตุของความผิดพลาด ตัวอย่างเช่นให้แน่ใจว่าคุณมี:

data-dismiss="modal"

และไม่

data-dissmiss="modal"

สังเกตุ double "ss" ในตัวอย่างที่สองที่จะทำให้ปุ่ม Close ที่ล้มเหลว

เราสามารถปิดป๊อปอัพคำกริยาด้วยวิธีต่อไปนี้:

// 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');

ใช้รหัสด้านบนเพื่อซ่อนฉากหลังของคำกริยาถ้าคุณใช้หลายคำกริยาป๊อปในหน้าเดียว

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

คุณสามารถใช้ได้;

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

การใช้ modal.hide จะซ่อนคำกริยาเท่านั้น หากคุณใช้การซ้อนทับภายใต้คำกริยามันจะยังคงอยู่ ใช้การคลิกเพื่อโทรเพื่อปิด modal และลบภาพซ้อนทับ

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

อีกวิธีหนึ่งในการทำเช่นนี้คือก่อนอื่นคุณจะลบคลาสโมดัล - โอเพ่นซึ่งจะปิดโมดัล จากนั้นคุณจะลบฉากหลังของกิริยาที่เกิดขึ้นซึ่งจะเอาฝาครอบสีเทาออกของกิริยา

รหัสต่อไปนี้สามารถใช้:

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

ฉันปิดเป็นกิริยาช่วยโดยทางโปรแกรมด้วยเคล็ดลับนี้

เพิ่มปุ่มในกิริยากับและซ่อนปุ่มที่มีdata-dismiss="modal" display: noneนี่คือลักษณะที่ปรากฏ

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

ตอนนี้เมื่อคุณต้องการปิด modal โดยทางโปรแกรมเพียงแค่ทริกเกอร์คลิกเหตุการณ์บนปุ่มนั้นซึ่งผู้ใช้จะมองไม่เห็น

ใน Javascript คุณสามารถเปิดใช้งานการคลิกที่ปุ่มเช่นนี้:

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

รหัสนี้ทำงานอย่างสมบูรณ์แบบสำหรับฉันที่จะปิด modal (ฉันใช้ bootstrap 3.3)

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

ในกรณีของฉันหน้าหลักจากการที่ bootstrap modal เริ่มทำงานไม่ตอบสนองหลังจากใช้$("#modal").modal('toggle');วิธีการ แต่เริ่มตอบสนองด้วยวิธีต่อไปนี้:

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

มันใช้งานได้ดี

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

อย่างไรก็ตามเมื่อคุณมีโมเดอเรเตอร์หลายตัวซ้อนทับกันมันจะไม่ได้ผลดังนั้นมันจึงใช้งานได้

data-dismiss="modal"

หลังจากการทดสอบบางอย่างผมพบว่าสำหรับบูตจำเป็นกิริยาที่จะรอเวลาก่อนที่จะดำเนินการหลังจากรัน$(.modal).modal('hide') $(.modal).modal('show')และฉันพบว่าในกรณีของฉันฉันต้องการช่วงเวลาอย่างน้อย 500 milisecond ระหว่างสอง
นี่คือกรณีทดสอบและวิธีแก้ปัญหาของฉัน:

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

คุณสามารถดูการอ้างอิงนี้แต่ถ้าลิงค์นี้ถูกลบไปอ่านคำอธิบายนี้:

โทรหา modal ด้วย id myModal ด้วยบรรทัดเดียวของ JavaScript:

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

ตัวเลือก

ตัวเลือกสามารถส่งผ่านข้อมูลคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการDATA-ในขณะที่ข้อมูลฉากหลัง = ""

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

วิธีการ

วิธีการและการเปลี่ยนแปลงแบบอะซิงโครนัส

วิธีการ API ทั้งหมดไม่ตรงกันและเริ่มการเปลี่ยนแปลง พวกเขากลับไปที่ผู้โทรทันทีที่เริ่มต้นการเปลี่ยนแปลง แต่ก่อนที่จะสิ้นสุด นอกจากนี้การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนแปลงจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

.modal (ตัวเลือก)

เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับวัตถุตัวเลือกเพิ่มเติม

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

.modal ( 'สลับ')

สลับคำกริยาด้วยตนเอง กลับไปที่ผู้โทรก่อนที่จะมีการแสดงหรือซ่อนคำกริยาจริง (เช่นก่อนที่จะมีการแสดงเหตุการณ์

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

.modal ( 'แสดง')

เปิดคำกริยาด้วยตนเอง ส่งกลับไปยังผู้เรียกก่อนที่จะมีการแสดงคำกริยาจริง (เช่นก่อนที่จะเกิดเหตุการณ์

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

.modal ( 'ซ่อน')

ซ่อน modal ด้วยตนเอง กลับสู่ผู้โทรก่อนที่จะมีการซ่อนคำกริยาจริง (เช่นก่อนที่เหตุการณ์ hidden.bs.modal จะเกิดขึ้น)

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

.modal ( 'handleUpdate')

ปรับตำแหน่งของ modal ด้วยตนเองถ้าความสูงของ modal เปลี่ยนแปลงในขณะที่เปิดอยู่ (เช่นในกรณีที่แถบเลื่อนปรากฏขึ้น)

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

.modal ( 'ทิ้ง')

ทำลายคำกริยาขององค์ประกอบ

เหตุการณ์ที่เกิดขึ้น

คลาสโมดอลของ Bootstrap จะเปิดเผยเหตุการณ์บางอย่างสำหรับการเชื่อมต่อเข้ากับฟังก์ชั่นโมดัล เหตุการณ์โมดัลทั้งหมดจะเริ่มที่โมดัลเอง (เช่นที่ **) พิมพ์คำอธิบาย

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

นอกจากนี้คุณสามารถ "คลิก" ที่ 'x' ซึ่งจะปิดกล่องโต้ตอบ เช่น:

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

ในกรณีของฉันฉันใช้ปุ่มเพื่อแสดงคำกริยา

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

ดังนั้นในรหัสของฉันเพื่อปิด modal (ที่มี id = 'my-modal-to-show') ฉันเรียกใช้ฟังก์ชันนั้น (ใน Angular typescript):

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

ถ้าฉันโทร $ (modalId) .modal ('ซ่อน') มันไม่ทำงานและฉันไม่รู้ว่าทำไม

ป.ล. : ในคำกริยาของฉันฉันเขียนองค์ประกอบปุ่มที่มี. ปิดชั้นด้วย

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

บางครั้งการแก้ปัญหาทำงานไม่ได้ดังนั้นคุณต้องลบในชั้นเรียนอย่างถูกต้องและเพิ่มการแสดง css: ไม่มีด้วยตนเอง

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