不允许关闭Twitter引导模式窗口

我正在使用Twitter引导创建一个模态窗口。默认的行为是，如果你点击模式区域之外，模式将自动关闭。我想禁用，即不关闭模式窗口时，点击模式之外。

有人可以分享jQuery代码来做到这一点吗?

346962 次浏览
小开
最佳答案

我相信您想要将背景值设置为静态。如果您想避免在使用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是包含你的模式内容的div的ID。

小开

如果你已经初始化了模态窗口，那么你可能想用$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})重置选项，以确保它将应用新的选项。

小开

你也可以在模态定义中包含这些属性:

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

有点像@AymKdn的答案，但这将允许您在不重新初始化模态的情况下更改选项。

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

或者如果你需要做多个选项，JavaScript的with在这里派上用场!

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

如果模式已经打开，这些选项只会在模式打开下次时生效。

小开

如果有人从谷歌来到这里，试图找出如何阻止某人关闭一个模式，不要忘记，在模式的右上方还有一个关闭按钮，需要删除。

我用一些CSS来隐藏它:

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

注意，使用"display: none;"会在创建模态时被覆盖，所以不要使用它。

小开

我发现最好的是把这个代码添加到链接中

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

把这两项加起来

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

它将禁用逃避按钮，也点击任何地方和隐藏。

小开

覆盖Dialog的Bootstrap ' hide '事件并停止其默认行为(以释放对话框)。

请参阅下面的代码片段:

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


e.preventDefault();
});

它在我们的例子中工作得很好。

小开

你可以禁用后台的点击关闭行为，并通过添加JavaScript到你的页面，使它成为所有modal的默认值(确保它在jQuery和Bootstrap JS加载后执行):

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

是的，你可以这样做:

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

好吧，这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)

我的问题是类似的，模态框关闭时，我有里面的iframe正在加载，所以我必须禁用模态解散，直到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.on("hide", function (e) {
if(is_loading !== true) {
e.preventDefault();
return false
}
});

但是随着变量is_loading将重新启用关闭后Iframe加载。

小开

正如D3VELOPER所说，下面的代码解决了它:

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

我使用jquery &bootstrap和简单的removeData('modal')不起作用。

小开

现在这样做很容易。添加:

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

在你的模态分频器中。

小开

如果您想有条件地禁用backdrop click closing特性。您可以使用下面的代码行在运行时将backdrop选项设置为static。

引导v3.xx

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

引导v2.xx

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

这将防止一个已经实例化的模型(# EYZ0选项设置为false (默认行为))关闭。

小开

你可以设置模式弹出窗口的默认行为使用下面的代码行:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
小开 
<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插件中的下面一行。# EYZ1。

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

试试主线:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">
小开 
$(document).ready(function(e){


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


});
< p >“背景:“静态”“将防止关闭模式时点击它之外; “键盘:false"指定模式可以由escape键关闭(Esc) “显示:false"将隐藏模式时，页面已完成加载

小开

作为答案提出的解决方案不起作用，有什么问题?

$(document).ready(function(){
$('.modal').modal('show');
$('.modal').modal({
backdrop: 'static',
keyboard: false
})
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
       

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="text-right"><button type="button" class="btn btn-primary">print</button></div>
</div>
</div>
</div>
</div>
</body>
</html>

小开

在引导5中属性名已经改变。你可以使用以下方法:

data-bs-backdrop="static" data-bs-keyboard="false"
小开

根据bootstrap 5更新的语法如下:
# EYZ0 < / p > 

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" >
小开

# EYZ0

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container p-5" >
<div class="row text-center">
<div class="col-md-6">
<!-- Button trigger modal -->
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-bs-backdrop="static" data-bs-keyboard="false"
<button type="button" class="btn btn-primary my-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop 5 modal
</button>


<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Button trigger modal -->
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-backdrop="static" data-keyboard="false"
<button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#exampleModal">
Launch static backdrop 4 modal
</button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
    

<!-- Bootstrap 5 Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    

<!-- Bootstrap 4 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

小开

bs 5

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>


<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>

bs 4.4

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>


<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
...
</div>
</div>
小开

只需设置static为backdrop选项(背景:“静态”)。并且通过从keyboard按Esc来防止关闭模态，你必须为keyboard设置false选项(键盘:false)

所以，代码将是。

var jq = jQuery.noConflict();
jq(document).ready(function(){
jq('#exampleModal').modal({backdrop: 'static', keyboard: false});
});
小开

大雄的答案适用于单一情况，但我在一个旧网站上有20-30个情态动词，正在寻找一个答案，为每个用bootstrap打开的情态动词设置这个。

您可以将事件名称空间作为模式的目标，并为每个引导模式添加默认设置。

你可能不想对每个模式都这样做，但如果你这样做了，就没有必要静态地指定每个模式调用。

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data(), {backdrop: 'static', keyboard: false})


e.preventDefault()


$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})

在我的例子中，我将{backdrop: 'static', keyboard: false}添加到选项结构中。


提交答案