ปิดการใช้งานการคลิกนอกพื้นที่ mod bootstrap เพื่อปิด modal

440

ฉันกำลังทำเว็บไซต์ bootstrap โดยใช้ 'Modals' สองสาม Bootstrap ฉันกำลังพยายามปรับแต่งคุณสมบัติเริ่มต้นบางอย่าง

ปัญหาคือสิ่งนี้ คุณสามารถปิดคำกริยาโดยคลิกที่พื้นหลัง อย่างไรก็ตามมีการปิดใช้งานคุณลักษณะนี้หรือไม่ เกี่ยวกับ modifc modals เท่านั้น?

Bootstrap หน้า modal

javascript  css  twitter-bootstrap  modal-dialog 
— ปัญญาชน
แหล่งที่มา
คุณช่วยบอกฉันทีว่าเหตุการณ์ใดถูกเรียกในสถานการณ์นี้ $ scope.ok, $ scope $ เลิกฉันได้ทำการติดตั้งเพื่อส่งและยกเลิก แต่ฉันไม่ทราบว่ามีเหตุการณ์เกิดขึ้นในสถานการณ์นี้
— LoveToCode
4
— tm

คำตอบ:

912

ในบทตัวเลือกในหน้าเว็บที่คุณเชื่อมโยงคุณจะเห็นbackdropตัวเลือก ผ่านตัวเลือกนี้ด้วยค่า'static'จะป้องกันไม่ให้ปิด modal
ในฐานะที่เป็น @PedroVagner ชี้กับความเห็นของคุณยังสามารถส่งผ่านเพื่อป้องกันการปิดกิริยาโดยการกด {keyboard: false}Esc

หากคุณเปิดโมดอลโดย js ให้ใช้: 

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

หากคุณกำลังใช้คุณสมบัติข้อมูลให้ใช้: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
แหล่งที่มา
มีวิธีใดบ้างที่จะทำให้พื้นหลังสามารถลงทะเบียนการคลิกสำหรับการควบคุมอื่น ๆ ได้ แต่ไม่เพียงแค่ปิดโมดัล?
— vivekanon
2
@mystikacid คุณควรถามคำถามใหม่สำหรับสิ่งนั้น มันจะเป็นการดีกว่าที่จะช่วยคุณในการแก้ไขปัญหาและผู้ใช้รายอื่นที่ค้นหาโซลูชันที่คล้ายกัน
— Doguita
@Doguita: ที่นี่: stackoverflow.com/questions/33000898/…
— vivekanon
3
มีปัญหาที่เรียบง่าย แต่น่ารำคาญให้แน่ใจว่าคุณวางสาย jquery ก่อน$('#modal').modal('show');หวังว่านี่จะช่วยได้!
— cwiggo
3
cwiggo คุณไม่ได้ใช้ modal $ ('# modal'). modal ('show'); - คุณเพียงแค่ใช้. mod ({Backdrop: 'static', keyboard: false}) - ไม่มีคำสั่งแสดงหรือสลับ
— TV-C-15
135

นี่เป็นวิธีที่ง่ายที่สุด

คุณสามารถกำหนดพฤติกรรมการใช้คำสั่งกำหนด data-keyboard และ data-Backdrop

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
แหล่งที่มา
2
นี่เป็นสิ่งเดียวที่ทำงานให้ฉัน การส่งผ่านตัวเลือกใน JS โดยตรงไม่ทำงานสำหรับฉันด้วยเหตุผลบางอย่าง (รุ่น 3.3.7) หากใครก็ตามที่ยืนยันฉันอาจเปิดปัญหากับทีม Bootstrap
— dchacke
ในตอนแรกการใช้ js version ก็ไม่ได้ผลสำหรับฉันเช่นกันเพราะฉันตั้งค่าทุกอย่างหลังจากเปิดโมดัล คุณควรทำเช่นนี้ "$ ('# modalForm'). modal ({Backdrop: 'static', keyboard: false});" ก่อนหน้านี้ "$ ('# modalForm'). modal ('แสดง');" แต่สำหรับฉันคำตอบที่ดีที่สุดคือจาก @ ಅನಿಲ್
— ลูคัส
สิ่งนี้ใช้ได้สำหรับฉัน การวางตัวdata-backdrop="static"เลือกบนคำจำกัดความของคำกริยาไม่ใช่ปุ่มทริกเกอร์ที่เปิดคำกริยาตามที่ระบุในคำตอบอื่น
— TSmith
99

คุณสามารถใช้คุณลักษณะเช่นนี้: data-backdrop="static"หรือกับ javascript: 

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

ดูคำตอบนี้ด้วย: ไม่อนุญาตให้ปิด twitter bootstrap หน้าต่าง modal

— Antonis Grigoriadis
แหล่งที่มา
<div id = "modal" class = "modal hide fade ใน" data-keyboard = "false" data-backdrop = "static"> นี่เป็นคำตอบที่ดีที่สุด
— Kamlesh
34

ในแอปพลิเคชันของฉันฉันใช้โค้ดด้านล่างเพื่อแสดง Bootstrap modal ผ่าน jQuery

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
แหล่งที่มา
นี่เป็นคำตอบที่ดีเพราะรหัสนี้จะทำงานเฉพาะเมื่อเปิดเป็นกิริยาช่วย
— Deepak Dholiyan
32

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

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

เพื่อเปลี่ยนพฤติกรรมเริ่มต้น

— David Navarro Astudillo
แหล่งที่มา
คำตอบที่ยอดเยี่ยมเพราะมันจัดการกับสถานการณ์สำหรับ modals ทั้งหมด
— Haris ur Rehman
1
ใน bootstrap v4 ไวยากรณ์คือ: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— แกรี่อังกฤษ
11

มีสองวิธีในการปิดใช้งานการคลิกนอกพื้นที่รุ่น bootstrap เพื่อปิด modal-

  1. ใช้ javascript

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

  2. ใช้ data data ในแท็ก HTML

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
— Gaurav Tripathi
แหล่งที่มา
9

ชำระเงินนี้ ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
ขยายตัวอย่างข้อมูล

— Sachin Sanchaniya
แหล่งที่มา
6

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

Bootstrap 3.4

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Bootstrap 4.3+

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

เปลี่ยนตัวเลือกเป็น _config

— Cava
แหล่งที่มา
สำหรับ Bootstrap 4 + ควรเป็น_setEscapeEvent()เพราะ.escape()อะไร?
— Ivan Bacher
@IvanBacher ใช้งานได้กับฉันโดยใช้. escape ()
— Cava
5

วิธีแก้ปัญหาสำหรับฉันมีดังต่อไปนี้: 

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

ฉากหลัง: ปิดการใช้งานกิจกรรมคลิกด้านนอก

แป้นพิมพ์: ปิดใช้งานเหตุการณ์คำหลักสเคป

— Jorge Santos Neill
แหล่งที่มา
4 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

ลองสิ่งนี้ในระหว่างการพัฒนาแอปพลิเคชันของฉัน ... ฉันเจอปัญหาที่ค่าเริ่มต้นสำหรับ model attribute => data-keyboard="true", =>data-backdrop="non static"

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

— Deepalakshmi
แหล่งที่มา
1

ไม่มีวิธีแก้ปัญหาเหล่านี้สำหรับฉัน

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

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

$('.modal').off('click');

— RGB
แหล่งที่มา
0 
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})
— โซจูโพคาเด
แหล่งที่มา
0

หากคุณใช้@ ng-bootstrap ให้ใช้สิ่งต่อไปนี้:

ตัวแทน

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

แบบ

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

รหัสนี้ทดสอบกับ angular 9 โดยใช้:

  1. "@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",

  2. "bootstrap": "^ 4.4.1",

— Hamfri
แหล่งที่มา
0

ใช้สิ่งนี้หากคุณต้องการปิดใช้งานการคลิกด้านนอกสำหรับโมดัลทั้งหมดโดยใช้ jQuery เพิ่มสคริปต์นี้ใน Javascript ของคุณหลังจาก jQuery

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});
— Sahan
แหล่งที่มา
-1

คุณสามารถทำได้โดยไม่ต้องใช้ JQuery เช่น:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
แหล่งที่มา
-2

เพิ่ม CSS ด้านล่างตามที่คุณต้องการความกว้างหน้าจอของคุณ

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.