禁用引导模态区域之外的单击以关闭模态


438

我正在制作一个Bootstrap网站,其中包含几个Bootstrap'Modals'。我正在尝试自定义一些默认功能。

问题是这样;您可以通过单击背景关闭模态。反正有禁用此功能?仅在特定模态上?

引导程序模式页面


您能告诉我在这种情况下调用哪个事件吗?$ scope.ok,$ scope。$ dismiss我已经实现了提交和中止功能,但是我不知道在这种情况下会触发该事件。
LoveToCode '16

Answers:


908

在“选项”一章的链接页面中,您可以看到该backdrop选项。将此值传递给值'static'将防止关闭模态。
正如@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>`

有没有一种方法可以使后台能够注册其他控件的点击,但不能关闭模式?
vivekanon,2015年

2
@mystikacid您应该为此提出一个新问题。最好是帮助您解决问题以及其他用户搜索类似的解决方案。
Doguita 2015年


3
发生了一个简单但令人烦恼的问题,请确保将jquery行放置在$('#modal').modal('show');希望对您有所帮助之前!
cwiggo

3
cwiggo你不使用模式$('#modal')。modal('show'); -您只需使用.modal({backdrop:'static',keyboard:false})-不使用任何显示或切换命令
TV-C-15

133

这是最简单的一个

您可以定义模态行为,定义数据键盘和数据背景。

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

2
这是唯一对我有用的东西。由于某些原因,直接在JS中传递选项对我来说不起作用(版本3.3.7)。如果有人支持,我可能会与Bootstrap团队讨论一个问题。
dchacke

最初,使用js版本对我也不起作用,因为我在打开模式后进行了所有设置。您应该这样做“ $('#modalForm')。modal({background:'static',keyboard:false});“ 在“ $('#modalForm')。modal('show');”之前。但对我来说,最好的答案是从@ಅನಿಲ್
卢卡斯

这对我有用。将data-backdrop="static"选项放在模式定义上,而不是按其他答案中指定的方式打开模式的触发按钮,对我有用。
TSmith '19

99

您可以使用如下属性:data-backdrop="static"或与javascript一起使用:

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

也请参见以下答案:禁止关闭Twitter Bootstrap模式窗口


<div id =“ modal” class =“ modal隐藏淡入” data-keyboard =“ false” data-backdrop =“ static”>这是最佳答案。
Kamlesh

34

在我的应用程序中,我使用下面的代码通过jQuery显示Bootstrap模态。

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

更改默认行为。


很好的答案,因为它可以处理所有模态的情况。
Haris ur Rehman

1
在引导程序v4中,语法为:$ .fn.modal.prototype.constructor.Constructor.Default.backdrop ='static';
Garry English

11

有两种方法可以在引导程序模型区域之外禁用点击以关闭模式-

  1. 使用JavaScript

    $('#myModal').modal({
       backdrop: 'static',
       keyboard: false
    });
  2. 在HTML标签中使用data属性

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.

8

结帐此::

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


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

引导程序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


对于Bootstrap 4 +应该_setEscapeEvent()代替它.escape()吗?
伊万·巴彻

@IvanBacher使用.escape()对我起作用
卡瓦

5

适用于我的解决方案如下:

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

背景:禁用外部点击事件

键盘:禁用scape关键字事件


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

试试这个,在我的应用程序开发过程中...我也遇到了麻烦,即模型属性的默认值=> data-keyboard="true",=>data-backdrop="non static"

希望这能够帮到你!



1

这些解决方案都不适合我。

我有一个条款和条件模态,我想强迫人们在继续之前进行审查...由于选项的默认值“静态”和“键盘”,因此无法向下滚动页面,因为条款和条件只有几页日志,静态不是我的答案。

因此,相反,我去取消了模式上的click方法的绑定,通过以下操作,我能够获得所需的效果。

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



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>

此代码已使用以下代码在角度9上进行了测试:

  1. “ @ ng-bootstrap / ng-bootstrap”:“ ^ 6.1.0”,

  2. “ bootstrap”:“ ^ 4.4.1”,


0

如果要使用jQuery禁用所有模式的外部点击,请使用此选项。将此脚本添加到jQuery之后的Javascript中。

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});

-1

您也可以不使用JQuery来执行此操作,如下所示:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

-2

根据您的屏幕宽度添加以下CSS。

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.