วิธีซ่อน Bootstrap modal ด้วย javascript


281

ฉันได้อ่านโพสต์ที่นี่เว็บไซต์ Bootstrap และ Googled อย่างบ้าคลั่ง - แต่ไม่สามารถหาสิ่งที่ฉันแน่ใจว่าเป็นคำตอบที่ง่าย ...

ฉันมี Bootstrap เป็นกิริยาช่วยที่ฉันเปิดจากผู้ช่วย link_to เช่นนี้

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

ในของฉันContactsController.createการกระทำฉันมีรหัสที่สร้างแล้วผ่านออกไปContact create.js.erbในcreate.js.erbฉันมีรหัสการจัดการข้อผิดพลาด (การผสมผสานของทับทิมและจาวาสคริปต์) หากทุกอย่างไปได้ด้วยดีฉันต้องการปิดคำกริยา

ที่นี่ฉันมีปัญหา ฉันไม่สามารถละทิ้งคำกริยาเมื่อทุกอย่างเป็นไปด้วยดี

ฉันลอง$('#myModal').modal('hide');แล้วและนี่ไม่มีผล ฉันได้ลองแล้ว$('#myModal').hide();ซึ่งเป็นสาเหตุให้คำสั่งยกเลิก แต่ออกจากฉากหลัง

คำแนะนำเกี่ยวกับวิธีการปิดคำกริยาและ / หรือยกเลิกฉากหลังจากภายในcreate.js.erb?

แก้ไข

นี่คือมาร์กอัปสำหรับ 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>

1
$('#myModal').modal('hide');เป็นไวยากรณ์ที่ถูกต้องในการปิด / ซ่อน modal ด้วย id myModal(คุณสามารถทดสอบสิ่งนี้ได้ในหน้าเอกสาร Bootstrap ) คุณแน่ใจหรือว่าคุณมีองค์ประกอบที่มีรหัสนี้ในหน้าของคุณ? นอกจากนี้คุณพยายามทำอะไรกับการโทรนี้? การติดตั้งในปัจจุบันของคุณดำเนินการตามคำขอของ Ajax new_contact_pathและในเวลาเดียวกันก็เปิดใช้คำกริยาที่มีเนื้อหาของ#myModal- นี่คือสิ่งที่คุณต้องการหรือไม่?
Julian D.

สวัสดีจูเลียน ฉันโพสต์มาร์กอัป myModal ด้านบนและมี div ที่มีรหัสmyModalแน่นอน ฉันลองใหม่$('myModal').modal('hide')และยังไม่ดี HM ในแง่ของสิ่งที่ฉันพยายามทำให้สำเร็จฉันคิดว่ามันอาจไม่ถูกต้องที่จะใช้ตัวช่วย link_to ฉันได้แทนที่สิ่งนี้ด้วย: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>เนื่องจากฉันไม่ต้องการการโทรnew_contact_pathจริงๆ ฉันแค่ต้องการให้ modal เปิดและจัดการกับอินพุตของผู้ใช้ ขอบคุณที่สละเวลาตอบ ฉันจะดูว่าฉันไม่สามารถจัดเรียงนี้
jvillian

ฉันเดาว่ามันเป็นเพียงแค่พิมพ์ผิด แต่ควรจะโทร$('#myModal').modal('hide');(มี#ความคิดเห็นของคุณหายไป)
Julian D.

1
ฉันไม่ดีสำหรับการพิมพ์แทนที่จะคัดลอกจากรหัสจริง $('#myModal').modal('hide')รหัสจริงอ่าน: J
jvillian

คุณสามารถลองใช้ bootboxjs
md ahsan ariful เมื่อ

คำตอบ:


493

เมื่อโมดอลเปิดขึ้นในหน้าต่างเบราว์เซอร์ให้ใช้คอนโซลของเบราว์เซอร์เพื่อลอง

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

ถ้ามันใช้งานได้ (และโมดอลปิด) คุณก็รู้ว่า Javascript ที่ปิดของคุณไม่ได้ถูกส่งจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์อย่างถูกต้อง

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

คอนโซลของเบราว์เซอร์: firebug สำหรับ firefox, คอนโซลการดีบักสำหรับ Chrome หรือ Safari เป็นต้น


ย่อหน้าที่สองคือสิ่งที่ฉันกำลังมองหา ID ซ้ำกันทำให้โมดัลของฉันไม่แสดงอย่างถูกต้องในครั้งที่สอง
Matias

ปัญหานี้ได้รับการแก้ไขสำหรับฉัน ขอบคุณ
Finchy70

77

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

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

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

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

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


1
สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณทราบอย่างแน่นอนว่าควรปิดกล่องโต้ตอบใด ตัวอย่างเช่นในตอนท้ายของฟังก์ชั่นที่ประสบความสำเร็จ ด้วยวิธีนี้หากมีข้อผิดพลาดไดอะล็อกสามารถแสดงได้
จะ

47

ฉันใช้ Bootstrap 3.4 สำหรับฉันแล้วมันไม่ทำงาน

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

ด้วยความสิ้นคิดฉันทำสิ่งนี้:

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

อาจจะไม่หรูหรา แต่ก็ใช้งานได้


2
มันจะดีกว่าถ้าคุณใช้ $ (". modal-backdrop"). remove ();
หมาล่าเนื้อ

1
นี้จะแนะนำข้อบกพร่องใหม่ กรุณาใช้วิธีการแนะนำ
Benjamin Eckstein

jQuery ( 'กิริยา-ฉากหลัง.) คลิก ().

รถเล็ก ๆ น้อย ๆ แต่ก็ใช้งานได้อย่างแน่นอน วิธีการแก้ปัญหาของManuel Fernandoด้านล่างทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน
Munam Yousuf

@Umingo กรุณาแนะนำวิธีการถ้าสิ่งที่กล่าวถึงที่นี่ไม่ดีและคุณรู้
ช่วง

47

แบบฟอร์มที่ดีที่สุดในการซ่อนและแสดง modal ด้วย bootstrap มัน

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

คำตอบที่ดีที่สุดโดยไกล การจำลองพฤติกรรมด้วยการคลิก jQuery fadeOut หรือ css สามารถสร้างการเยื้องศูนย์ในระยะยาว
Giorgio Tempesta

43

ฉันกำลังประสบกับข้อผิดพลาดเดียวกันและรหัสบรรทัดนี้ช่วยฉันได้จริงๆ

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

1
ฉันได้อ่านปัญหาอื่นที่แนะนำว่าปัญหาอาจมีแอตทริบิวต์ data-dismiss ในองค์ประกอบแล้วด้านบนของความพยายามที่จะทริกเกอร์มันจาก javascript
Femtosecond

ขอบคุณมาก Manuel ขอบคุณมากหลังจากการค้นหาจำนวนมากแก้ปัญหาของฉัน $ ('# MyModelId') modal ('ซ่อน'); $ ("[data-dismiss = modal]"). trigger ({type: "click"}); ที่ฉันต้องการที่จะปิดเป็นกิริยาช่วยในความสำเร็จ
อาแจ็กซ์

22
$('#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

มันใช้งานได้ แต่พังคำกริยาถ้าฉันเปิดอีกครั้งเป็นกิริยาช่วยไม่เลื่อนอีกต่อไป
4324

21

ฉันพบวิธีแก้ไขที่ถูกต้องที่คุณสามารถใช้รหัสนี้

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

ทางออกที่ดีที่สุดจนถึงขณะนี้
kosas

ยอดเยี่ยมเพียงอย่างเดียวคือ +1 ที่ดีที่สุด
MooMoo

11

ฉันพบสิ่งที่ฉันเชื่อว่าเป็นปัญหาที่คล้ายกัน $('#myModal').modal('hide');มีแนวโน้มที่จะวิ่งผ่านฟังก์ชั่นที่และฮิตบรรทัด

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

ปัญหาคือค่า isShown อาจไม่ได้ถูกกำหนดแม้ว่า modal จะแสดงขึ้นและค่าควรเป็นจริง ฉันได้แก้ไขรหัส bootstrap เล็กน้อยดังต่อไปนี้

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

นี่ดูเหมือนจะแก้ไขปัญหาได้เป็นส่วนใหญ่ $('.modal-backdrop').remove();ถ้าฉากหลังยังคงอยู่คุณก็สามารถเพิ่มการเรียกร้องให้ลบออกด้วยตนเองหลังจากที่ซ่อนโทร ไม่เหมาะเลย แต่ใช้งานได้


11

(อ้างถึง Bootstrap 3) ในการซ่อนการใช้งานกิริยา: $('#modal').modal('hide')ในการซ่อนการใช้คำกริยา: แต่เหตุผลที่ฉากหลังแขวนอยู่รอบ ๆ (สำหรับฉัน) เป็นเพราะฉันทำลาย DOM สำหรับคำกริยาก่อนที่จะ 'ซ่อน' เสร็จ

ในการแก้ไขปัญหานี้ฉันถูกล่ามโซ่เหตุการณ์ที่ซ่อนอยู่ด้วยการลบ DOM ในกรณีของฉัน:this.render()

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

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

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

1
แต่คุณช่วยบอกฉันเกี่ยวกับthis.render()การแสดงundefined is not a functionในคอนโซลโครเมี่ยมของฉันได้ไหม
Anil Kumar Pandey

9

ฉันโชคดีกว่าที่ได้โทรออกหลังจากมีการโทรกลับ "แสดง" เกิดขึ้น:

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

สิ่งนี้ทำให้มั่นใจว่า modal เสร็จสิ้นการโหลดก่อนที่จะทำการเรียก hide ()


8

สิ่งที่เราพบคือว่ามีความล่าช้าเล็กน้อยระหว่างการโทรไปยังรหัสเซิร์ฟเวอร์ของเราและการกลับไปสู่การโทรกลับสำเร็จ ถ้าเราล้อมรอบการเรียกไปยังเซิร์ฟเวอร์ใน$("#myModal").on('hidden.bs.modal', function (e)ตัวจัดการแล้วเรียก$("#myModal").modal("hide");วิธีการเบราว์เซอร์จะซ่อนโมดอลแล้วเรียกใช้รหัสฝั่งเซิร์ฟเวอร์

อีกครั้งไม่หรูหรา แต่ทำงานได้

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

อย่างที่คุณเห็นเมื่อmyFuncถูกเรียกมันจะซ่อนโมดัลแล้วเรียกใช้รหัสฝั่งเซิร์ฟเวอร์


6

ฉันกำลังประสบปัญหาเดียวกันและหลังจากการทดลองเล็กน้อยฉันพบวิธีแก้ปัญหา ในตัวจัดการการคลิกของฉันฉันต้องหยุดเหตุการณ์จากการเดือดปุด ๆ เช่น:

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

6

นี่คือเอกสาร: http://getbootstrap.com/javascript/#modals-methods

นี่คือวิธีการ: $ ('# myModal'). modal ('hide')

หากคุณต้องการเปิดคำกริยาที่มีเนื้อหาต่างกันหลายครั้งฉันแนะนำให้เพิ่ม (ใน js หลักของคุณ):

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

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



5

แม้ว่าฉันจะมีปัญหาแบบเดียวกัน สิ่งนี้ช่วยฉันได้มาก

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


4

$('#modal').modal('hide');และตัวแปรของมันไม่ทำงานสำหรับฉันเว้นแต่ฉันจะdata-dismiss="modal"มีคุณสมบัติเป็นปุ่มยกเลิก เช่นเดียวกับคุณความต้องการของฉันอาจเป็นไปได้ที่จะปิด / อาจไม่ปิดขึ้นอยู่กับตรรกะเพิ่มเติมบางอย่างดังนั้นการคลิกลิงก์ที่มีdata-dismiss="modal"ทันทีจะไม่ทำ ฉันลงเอยด้วยการมีปุ่มที่ซ่อนอยู่data-dismiss="modal"ซึ่งฉันสามารถเรียกใช้ตัวจัดการการคลิกจากโปรแกรมได้

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

จากนั้นภายในตัวจัดการการคลิกเพื่อยกเลิกเมื่อคุณต้องการปิดคำกริยาที่คุณมี

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

ในกรณีของฉัน (หน้า asp net razor) ฉันมีความคุ้นเคยกับ OP: ฉันมี div ที่ค่อนข้างว่างเปล่ากับคลาส "modal" และเพิ่มไฟล์ cshtml แบบไดนามิกไปยังมันเช่นเนื้อหาของ modal และเพิ่มคลิกเพื่อปุ่มของสิ่งนี้ ร่างกายทันทีที่เป็นกิริยาช่วยจะปรากฏขึ้น การเรียก ".modal ('hide)" เพียงอย่างเดียวนั้นไม่เพียงพอดังที่คุณได้ชี้ให้เห็น: "data-dismiss =" modal "" ที่ปุ่มเรียกใช้คือข้อตกลง !!! ty
Csharpest

3

เราจำเป็นต้องดูแลเดือดปุด ๆ เหตุการณ์ จำเป็นต้องเพิ่มรหัสหนึ่งบรรทัด

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

3

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันพบว่าไม่มีสิ่งเหล่านี้จริงๆสิ่งที่ฉันกำลังมองหา ดูเหมือนว่าจะเกิดจากการพยายามปิดคำกริยาก่อนที่จะแสดงเสร็จสิ้น

โซลูชันของฉันขึ้นอยู่กับคำตอบของ @ schoonie23 แต่ฉันต้องเปลี่ยนบางสิ่ง

ก่อนอื่นฉันประกาศตัวแปรส่วนกลางที่ด้านบนสุดของสคริปต์:

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

จากนั้นในรหัสโมดอลของฉัน:

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

จากนั้นสิ่งนี้: (โปรดทราบชื่อ 'ที่แสดง .bs.modal' ที่ระบุว่าคำกริยานั้นแสดงให้เห็นอย่างสมบูรณ์เมื่อเทียบกับ 'การแสดง' ที่ก่อให้เกิดเมื่อมีการเรียกเหตุการณ์การแสดง (ตอนแรกฉันพยายามแค่ 'แสดง' แต่มันไม่ทำงาน )

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

หวังว่านี่จะช่วยให้ใครบางคนได้รับการวิจัยเพิ่มเติมในบางวัน ฉันใช้เวลาเล็กน้อยหาวิธีแก้ปัญหาก่อนที่จะมากับสิ่งนี้



1

หากคุณใช้คลาสปิดในโมดัลของคุณสิ่งต่อไปนี้จะใช้ได้ ขึ้นอยู่กับกรณีการใช้งานของคุณโดยทั่วไปฉันแนะนำให้กรองเฉพาะโมดัลที่มองเห็นได้หากมีโมดัลมากกว่าหนึ่งคลาสที่มีคลาสปิด

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

0

document.getElementById ( 'closeButton') คลิก (). // เพิ่ม data-dismiss = "modal" ให้กับองค์ประกอบใน modal และให้ id นี้


-1

นี่เป็นวิธีปฏิบัติที่ไม่ดี แต่คุณสามารถใช้เทคนิคนี้เพื่อปิดคำกริยาโดยการกดปุ่มปิดในจาวาสคริปต์ วิธีนี้จะปิดเป็นกิริยาช่วยหลังจาก 3 วินาที

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

-2

สิ่งนี้สามารถทำได้ใน HTML เพียง:

data-dismiss="modal"

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

@KevinFrancis เนื่องจากคำถามกำลังมองหาวิธีการเขียนโปรแกรมจากตัวควบคุมไม่ใช่วิธีการสร้างปุ่มที่ทำ
GreenAsJade
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.