ไม่อนุญาตให้ปิดหน้าต่าง modal Twitter Bootstrap

ฉันกำลังสร้างหน้าต่างโมดัลโดยใช้ Twitter Bootstrap พฤติกรรมเริ่มต้นคือถ้าคุณคลิกนอกพื้นที่ modal คำกริยาจะปิดโดยอัตโนมัติ ฉันต้องการปิดการใช้งานนั่นคือไม่ปิดหน้าต่าง modal เมื่อคลิกนอก modal

มีคนแบ่งปันรหัส jQuery เพื่อทำสิ่งนี้ได้ไหม

ผมเชื่อว่าคุณต้องการที่จะตั้งค่าฉากหลังจะคงที่ หากคุณต้องการหลีกเลี่ยงการปิดหน้าต่างเมื่อใช้Escกุญแจคุณจะต้องตั้งค่าอื่น

ตัวอย่าง:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

หรือถ้าคุณใช้ JavaScript:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

เพียงแค่ตั้งค่าคุณสมบัติการbackdrop'static'

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

คุณอาจต้องการตั้งค่าkeyboardคุณสมบัติเป็นfalseเพราะจะช่วยป้องกันไม่ให้ถูกปิดโดยกดปุ่มEscบนแป้นพิมพ์

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

myModal คือ ID ของ div ที่มีเนื้อหาเป็นกิริยาช่วยของคุณ

นอกจากนี้คุณยังสามารถรวมแอตทริบิวต์เหล่านี้ในการกำหนดคำกริยาเอง

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

หากคุณได้เริ่มต้นหน้าต่างโมดัลแล้วคุณอาจต้องการรีเซ็ตตัวเลือกด้วย$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})เพื่อให้แน่ใจว่าจะใช้ตัวเลือกใหม่

แทนที่เหตุการณ์ 'ซ่อน' Bootstrap ของกล่องโต้ตอบและหยุดพฤติกรรมเริ่มต้น (เพื่อกำจัดกล่องโต้ตอบ)

โปรดดูข้อมูลโค้ดด้านล่าง:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

มันทำงานได้ดีในกรณีของเรา

ใช่คุณสามารถทำสิ่งนี้ได้:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

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

$('#myModal').data('modal').options.keyboard = false;

หรือถ้าคุณต้องทำหลาย ๆ ตัวเลือก JavaScript withมีประโยชน์ที่นี่!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

หากโมดัลเปิดอยู่แล้วตัวเลือกเหล่านี้จะมีผลเฉพาะในครั้งต่อไปที่โมดัลเปิด

เพียงเพิ่มสองสิ่งนี้

data-backdrop="static" 
data-keyboard="false"

มันจะมีลักษณะเช่นนี้ในขณะนี้

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

มันจะปิดการใช้งานปุ่มหลบหนีและคลิกที่ใดก็ได้และซ่อน

คุณสามารถปิดการทำงานแบบคลิกเพื่อปิดของพื้นหลังและทำให้ค่านี้เป็นค่าเริ่มต้นสำหรับ modal ทั้งหมดของคุณโดยการเพิ่ม JavaScript นี้ในหน้าของคุณ (ตรวจสอบให้แน่ใจว่ามันถูกเรียกใช้หลังจากโหลด jQuery และ Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

ดังที่ D3VELOPER พูดว่ารหัสต่อไปนี้สามารถแก้ไขได้:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

ฉันใช้ jquery & bootstrap แล้วก็ใช้removeData('modal')ไม่ได้

สิ่งที่ดีที่สุดที่ฉันพบคือเพิ่มรหัสนี้ในลิงค์

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

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

ฉันใช้ CSS เพื่อซ่อน:

#Modal .modal-header button.close {
    visibility: hidden;
}

โปรดทราบว่าการใช้ "display: none;" ถูกเขียนทับเมื่อสร้างโมดัลดังนั้นอย่าใช้สิ่งนั้น

หากคุณต้องการปิดใช้งานbackdrop click closingคุณสมบัติตามเงื่อนไข คุณสามารถใช้บรรทัดต่อไปนี้เพื่อตั้งค่าbackdropตัวเลือกเป็นstaticในระหว่างรันไทม์

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

สิ่งนี้จะป้องกันโมเดลที่สร้างอินสแตนซ์แล้วโดยbackdropตั้งค่าตัวเลือกเป็นfalse( พฤติกรรมเริ่มต้น ) จากการปิด

คุณสามารถตั้งค่าการทำงานเริ่มต้นของป๊อปอัป modal โดยใช้บรรทัดด้านล่างของรหัส:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

การทำเช่นนั้นง่ายมากในปัจจุบัน เพียงเพิ่ม:

data-backdrop="static" data-keyboard="false" 

ในตัวแบ่งโมดอลของคุณ

นี่เป็นอีกทางเลือกหนึ่งที่พวกคุณบางคนอาจมองหา

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

โซลูชันที่นำเสนอที่นี่ไม่ทำงาน 100%

วิธีแก้ปัญหาของฉันคือ:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

ดังนั้นฉันจึงป้องกันไม่ให้ Modal ปิดด้วย:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

แต่ด้วย is_loading var ที่จะเปิดใช้งานการปิดอีกครั้งหลังจากโหลด Iframe แล้ว

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

ในการอัปเดตสถานะฉากหลังใน Bootstrap 4.1.3 หลังจากแสดงคำกริยาเราได้ใช้บรรทัดต่อไปนี้จากปลั๊กอินBootstrap-Modal-Wrapper ปลั๊กอิน Repository รหัสอ้างอิง

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");