Twitter bootstrap modal-backdrop ไม่ได้หายไป

ฉันกำลังใช้กล่องโต้ตอบ Mod bootstrap ของ Twitter เมื่อฉันคลิกที่ปุ่มส่งของไดอะล็อก bootstrap modal มันจะส่งคำขอ AJAX ปัญหาของฉันคือฉากหลังกิริยาไม่หายไป กล่องโต้ตอบ Modal หายไปอย่างถูกต้อง แต่แทนที่จะเป็น "modal-Backdrop ใน" ที่สร้างความทึบของหน้าจอให้คงอยู่

ฉันจะทำอย่างไร

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

หากไม่ได้ผลคุณสามารถบังคับให้มันหายไปโดยทำสิ่งต่อไปนี้:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

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

ในกรณีของฉันฉันพยายามที่จะสร้างเนื้อหา modal on-the-fly ด้วยรหัสบางอย่างเช่นนี้:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

ที่นี่ความคิดเห็น HTML หลังจาก</div>แท็กปิดหมายความว่า myModal เป็นคอลเลกชัน jQuery ของสององค์ประกอบ - div และความคิดเห็น พวกเขาทั้งสองได้รับหน้าที่ตามกฏหมายโดยแต่ละองค์ประกอบมีฉากหลังเป็นของตัวเอง แน่นอนคำกริยาที่ทำจากความคิดเห็นนั้นมองไม่เห็นนอกเหนือจากฉากหลังดังนั้นเมื่อฉันปิดคำกริยาจริง (div) มันดูเหมือนพื้นหลังจะถูกทิ้งไว้เบื้องหลัง

ฉันเพิ่งใช้เวลานานเกินไปกับปัญหานี้ :)

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

ปัญหาคือมีห่วงโซ่ของเหตุการณ์ที่เกิดขึ้นเมื่อคุณโทร

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

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

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

หวังว่านี่จะเป็นประโยชน์!

ใส่ในปุ่มการกระทำของคุณนี้:

data-backdrop="false"

และ

data-dismiss="modal" 

ตัวอย่าง:

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

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

หากคุณป้อน data-attr นี้. modal-Backdrop จะไม่ปรากฏขึ้น เอกสารเกี่ยวกับมันที่ลิงค์นี้: http://getbootstrap.com/javascript/#modals-usage

หากคุณใช้สำเนาและวางจากเว็บไซต์ getboostrap ในตัวเลือก html ที่สร้างขึ้นตรวจสอบให้แน่ใจว่าคุณได้ลบความคิดเห็น '<! - /.modal ->' Bootstrap สับสนและคิดว่าความคิดเห็นเป็นองค์ประกอบที่สองเป็นกิริยาช่วย มันสร้างการลดลงอีกครั้งสำหรับองค์ประกอบ "ที่สอง" นี้

ฉันรู้ว่านี่เป็นโพสต์เก่ามาก แต่อาจช่วยได้ นี่เป็นวิธีแก้ปัญหาเล็ก ๆ ของฉัน

$('#myModal').trigger('click');

นั่นมันควรจะแก้ปัญหาได้

ฉันประสบปัญหาที่คล้ายกัน: ในหน้าต่างโมดัลของฉันฉันมีสองปุ่ม "ยกเลิก" และ "ตกลง" ในขั้นต้นปุ่มทั้งสองจะปิดหน้าต่าง modal โดยเรียกใช้$('#myModal').modal('hide')(ด้วย "OK" ก่อนหน้านี้เพื่อเรียกใช้งานโค้ดบางอย่าง) และสถานการณ์จะเป็นดังต่อไปนี้:

1. เปิดหน้าต่าง modal
2. ทำการดำเนินการบางอย่างจากนั้นคลิกที่ "ตกลง" ทำการตรวจสอบพวกเขาและปิดคำกริยา
3. เปิดคำกริยาอีกครั้งและยกเลิกโดยคลิกที่ "ยกเลิก"
4. เปิดกิริยาอีกครั้งคลิกอีกครั้งที่ "ยกเลิก" ==> ฉากหลังไม่สามารถเข้าถึงได้อีกต่อไป!

ดีเพื่อนโต๊ะถัดไปของฉันบันทึกวันของฉัน: แทนที่จะกล่าวอ้าง$('#myModal').modal('hide')ให้ปุ่มของคุณแอตทริบิวต์data-dismiss="modal"และเพิ่มเหตุการณ์ "คลิก" เพื่อปุ่ม "ส่ง" ของคุณ ในปัญหาของฉันรหัส HTML (ดี TWIG) สำหรับปุ่มคือ:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

และในรหัส JavaScript ของฉันฉันมี:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

ในขณะที่ไม่มีเหตุการณ์ "คลิก" เกิดจากปุ่ม "ยกเลิก" โมดัลปิดอย่างถูกต้องและให้ฉันเล่นอีกครั้งด้วยหน้า "ปกติ" ดูเหมือนว่าจริง ๆ แล้วdata-dismiss="modal"ควรเป็นวิธีเดียวที่จะระบุว่าปุ่ม (หรือองค์ประกอบ DOM ใด ๆ ) ควรปิด Modal Bootstrap .modal('hide')วิธีดูเหมือนว่าจะประพฤติในทางที่ไม่สามารถควบคุมได้ค่อนข้าง

หวังว่านี่จะช่วยได้!

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

ปัญหาเกี่ยวกับเวลาและการเปลี่ยนภาพจางหายไป หากคุณแสดงคำกริยาก่อนที่การเปลี่ยนแปลงแบบค่อยเป็นค่อยไปสำหรับคำกริยาก่อนหน้านี้จะเสร็จสมบูรณ์คุณจะเห็นปัญหาฉากหลังแบบถาวรนี้ (ฉากหลังแบบกิริยาจะอยู่บนหน้าจอในแบบของคุณ) Bootstrap ไม่สนับสนุน modal หลายตัวพร้อมกัน แต่ดูเหมือนว่าจะเป็นปัญหาแม้ว่า modal ที่คุณซ่อนอยู่และ modal ที่คุณแสดงนั้นเหมือนกัน

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

1. ปิดการใช้งานแอนิเมชัน Fade สำหรับโมดัล (ลบคลาส "จาง" ออกจากกล่องโต้ตอบ)
2. อัปเดตข้อความของโมดอลแทนที่จะซ่อนและแสดงใหม่
3. แก้ไขเวลาเพื่อที่จะไม่แสดงคำกริยาจนกว่าจะเสร็จสิ้นการซ่อน modal ก่อนหน้า ใช้กิจกรรมของ modal เพื่อทำสิ่งนี้ http://getbootstrap.com/javascript/#modals-events

ต่อไปนี้เป็นบทความติดตามปัญหา bootstrap ที่เกี่ยวข้อง อาจเป็นไปได้ว่ามีบทความติดตามมากกว่าที่ฉันได้ระบุไว้ด้านล่าง

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ( 'ซ่อน')

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

ดังนั้นแทนที่จะ

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

ทำ

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

ดังนั้นคุณจะต้องรอจนกว่าเหตุการณ์ "ซ่อน" จะเสร็จสิ้น

ความผิดพลาดที่เป็นไปได้อีกประการหนึ่งที่อาจทำให้เกิดปัญหานี้ได้

ตรวจสอบให้แน่ใจว่าคุณไม่ได้รวมbootstrap.jsสคริปต์ไว้มากกว่าหนึ่งครั้งในหน้าของคุณ!

แม้ว่าฉันจะพบปัญหาที่คล้ายกันฉันมีสองปุ่มต่อไปนี้

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

ฉันต้องการที่จะดำเนินการ ajax และประสบความสำเร็จในการดำเนินการ ajax นั้นปิด modal ดังนั้นนี่คือสิ่งที่ฉันทำ

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

ฉันเรียกใช้เหตุการณ์การคลิกของปุ่ม 'ไม่' ซึ่งมีdata-dismiss="modal"คุณสมบัติ และสิ่งนี้ใช้ได้ผล :)

ใช้:

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

แหล่ง

โซลูชันนี้ใช้สำหรับ Ruby on Rails 3.x และไฟล์ js.erb ที่สร้างส่วนหนึ่งของ DOM รวมถึง modal มันจะทำงานโดยไม่คำนึงว่าการโทร ajax มาจากคำกริยาหรือจากส่วนอื่นของหน้า

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

ขอบคุณ @BillHuertas สำหรับจุดเริ่มต้น

. $ ( '# myModal') ทริกเกอร์ ( 'คลิก');

สิ่งนี้ใช้ได้สำหรับฉัน มันไม่ได้ปิดเพราะเมื่อคุณเปิดป๊อปอัพมันจะก่อให้เกิดฉากหลัง 2 หรือ 3 ดังนั้นเมื่อคุณทำ $ ('# myModal')) modal ('hide'); มันมีผลเฉพาะฉากหลังแบบกิริยาและส่วนที่เหลือยังคงอยู่

ปัญหา UpdatePanel

ปัญหาของฉันเกิดจากการวางตำแหน่งแผงอัปเดต ฉันมีคำกริยาทั้งหมดในแผงอัปเดต หากคุณประกาศคำกริยานอก updatepanel และเพิ่งจะพูดว่าร่างกายเป็นกิริยาช่วยในแผงการปรับปรุงแล้ว $ ('# myModalID'). modal ('ซ่อน'); ทำงาน

อีกมุมมองหนึ่งสำหรับคำถามนี้ (ฉันใช้ bootstrap.js เวอร์ชั่น 3.3.6)

ฉันเข้าใจผิดว่าเริ่มต้น modal ทั้งสองด้วยตนเองใน javascript:

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

และโดยการใช้

data-toggle="modal"

ในปุ่มนี้เหมือนตัวอย่างด้านล่าง (แสดงในเอกสาร)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

ดังนั้นผลลัพธ์จึงสร้างสองอินสแตนซ์ของ

<div class="modal-backdrop fade in"></div>

ต่อท้ายเนื้อหาของ html ของฉันเมื่อเปิดคำกริยา นี่อาจเป็นสาเหตุเมื่อปิดโมดอลโดยใช้ฟังก์ชั่น:

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

มันลบอินสแตนซ์ของฉากหลังเดียวเท่านั้น (ดังที่แสดงด้านบน) ดังนั้นฉากหลังจะไม่หายไป แต่มันก็หายไปถ้าคุณใช้data-dismiss="modal" add บน html ดังที่แสดงใน bootstrap doc

ดังนั้นวิธีการแก้ปัญหาของฉันคือการเริ่มต้นเป็นกิริยาช่วยด้วยตนเองใน javascript และไม่ได้ใช้ data data ด้วยวิธีนี้ฉันสามารถปิด modal ด้วยตนเองและโดยใช้ data-dismiss="modal"คุณสมบัติ

หวังว่านี่จะช่วยได้ถ้าคุณประสบปัญหาเดียวกันกับฉัน

FYI ในกรณีที่มีบางคนยังคงทำงานอยู่ ... ฉันใช้เวลาประมาณ 3 ชั่วโมงในการค้นพบว่าวิธีที่ดีที่สุดที่จะทำคือ:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

ฟังก์ชั่นที่จะปิด modal นั้นใช้งานง่ายมาก

การเพิ่มdata-dismiss="modal"ปุ่มใด ๆ ในกิริยาช่วยฉันได้ ฉันต้องการปุ่มของฉันเพื่อเรียกใช้ฟังก์ชั่นที่มีเชิงมุมเพื่อเรียกใช้ ajax และปิดโมดัลดังนั้นฉันจึงเพิ่ม a .toggle()ภายในฟังก์ชันและทำงานได้ดี (ในกรณีของฉันฉันใช้bootstrap modalและใช้บางอย่างangularไม่ใช่ตัวควบคุมคำกริยาจริง)

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

ผมมีปัญหาเหมือนกัน. ฉันค้นพบว่ามันเป็นเพราะความขัดแย้งระหว่าง Bootstrap และ JQueryUI

ทั้งสองใช้คลาส "ปิด" การเปลี่ยนคลาสในหนึ่งหรืออื่น ๆ แก้ไขนี้

ใช้สลับแทนซ่อนแก้ไขปัญหาของฉัน

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

นั่นคือ .. หากคุณระบุปุ่มที่เรียกป๊อปอัป modal โดยใช้ชื่อคลาส 'myModal' ตรวจสอบให้แน่ใจว่าไม่มีองค์ประกอบที่ไม่เกี่ยวข้องที่มีชื่อคลาสเดียวกัน

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

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

ฉันมีปัญหาเดียวกันเมื่อพยายามส่งแบบฟอร์ม วิธีแก้ไขคือเปลี่ยนประเภทปุ่มจากsubmitเป็นbuttonแล้วจัดการกับเหตุการณ์การคลิกปุ่มดังนี้:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

ในโครงการ. net MVC4 ฉันมีป๊อปอัป modal (bootstrap 3.0) ใน Ajax.BeginForm (OnComplete = "addComplete" [ลบรหัสพิเศษ]) ภายในจาวาสคริปต์ "addComplete" ฉันมีรหัสต่อไปนี้ นี่เป็นการแก้ไขปัญหาของฉัน

$ ( '# moreLotDPModal') ซ่อน ().

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ( 'ร่างกาย') removeClass ( 'กิริยาเปิด').

. $ ( 'กิริยา-ฉากหลัง') ลบ ();

$ ( '# moreLotDPModal') removeClass ( "ใน.");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

ฉันมีปัญหาเดียวกันนี้มาก

อย่างไรก็ตามฉันใช้ bootbox.js ดังนั้นมันอาจเป็นเรื่องที่ต้องทำ

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

นั่นคือสิ่งที่ทำให้เกิดปัญหา:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

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

ฉันทำงานกับ Meteor แล้วและฉันก็มีปัญหาเดียวกัน สาเหตุของข้อผิดพลาดของฉันคือ:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

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

วิธีแก้ปัญหา: ย้ายคำกริยาออกจาก if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

fiddle -> https://jsfiddle.net/o6th7t1x/4/

ค่าเริ่มต้นของแอตทริบิวต์data-Backdropของคุณสามารถเป็นได้

"คงที่", "จริง", "เท็จ"

คงที่และจริงเพิ่ม modal shadow ในขณะที่falseปิดการใช้งาน Shadow ดังนั้นคุณเพียงแค่ต้องเปลี่ยนค่านี้ด้วยการคลิกครั้งแรกเป็นเท็จ แบบนี้:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

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

วิธีแก้ไขปัญหาคือให้เวลากับเบราว์เซอร์เพียงพอในการจัดการกับฉากหลังของคำกริยา แทนที่จะดำเนินการทันทีหลังจากคลิก 'ยืนยัน' ให้เบราว์เซอร์บอก 500ms เพื่อซ่อน modal ที่ 1 และทำความสะอาดฉากหลังเป็นต้น - จากนั้นให้ดำเนินการซึ่งจะสิ้นสุดในการแสดง modal ข้อผิดพลาด

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

ฟังก์ชัน _dialogConfirmed () มีรหัสต่อไปนี้:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

ฉันคาดเดาว่าโซลูชันอื่น ๆ จะทำงานได้เนื่องจากพวกเขาใช้เวลามากพอที่จะทำให้เบราว์เซอร์มีเวลาทำความสะอาดที่จำเป็น

ใน ASP.NET เพิ่มการอัปเดตสำหรับ UpdatePanel ด้วยโค้ดด้านหลังหลังจากคำสั่ง jquery ตัวอย่าง:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();