gpt4 book ai didi

javascript - 关闭当前模态后打开新模态( Bootstrap )

转载 作者:行者123 更新时间:2023-11-28 18:01:30 25 4
gpt4 key购买 nike

我使用 Bootstrap 模式来显示 pdf

我希望当用户关闭模式(通过单击关闭或单击 mdoal 外部)时打开一个新模式

要在模态上打开我的 Pdf,我使用以下代码:

<a class="btn btn-primary show-pdf" title="exemple" href="./parcel.php">PDF</a>

<script type="text/javascript">

(function(a){a.twModalPDF=function(b){defaults={title:"Parcel",message:"Fail",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 1020px;overflow-y: auto;"':"";html='<div class="modal fade" id="oModalPDF">';html+='<div class="modal-dialog modal-lg">';html+='<div class="modal-content">';html+='<div class="modal-body" '+c+">";html+=b.message;html+="</div>";html+='<div class="modal-footer">';if(b.closeButton===true){html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>'}html+="</div>";html+="</div>";html+="</div>";html+="</div>";a("body").prepend(html);a("#oModalPDF").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery);


$(function(){
$('.show-pdf').on('click',function(){
var sUrl = $(this).attr('href');
var sTitre = $(this).attr('title');
var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
$.twModalPDF({
title:sTitre,
message: sIframe,
closeButton:true,
scrollable:false
});
return false;
});
})

</script>

它工作得很好,为了打开新模式,我有这个,但它们不起作用......

<div class="modal fade" id="Finish" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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>
<h4 class="modal-title" id="myModalLabel">Attention</h4>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<div class="col-md-5">
<button type="button" class="btn btn-success btn-lg col-xs-12 margin-bottom" data-dismiss="modal">No</button>
</div>
<div class="col-md-7">
<form action="./forms/success.php" method="post">
<button type="submit" name="saveDispatching" value="1" class="btn btn-lg btn-default col-xs-12">Yes</button>
</form>
</div>
</div>
</div>
</div>
</div>

<script>
$('.modal').click(function(e){
e.preventDefault();

$('#oModalPDF')
.modal('hide')
.on('hidden.bs.modal', function (e) {
$('#Finish').modal('show');

$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
});

});
</script>

我该怎么办?谢谢您的帮助

最佳答案

尝试像这样组织你的代码:

$(function(){    
$('.show-pdf').on('click',function(){
var sUrl = $(this).attr('href');
var sTitre = $(this).attr('title');
var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
$.twModalPDF({
title:sTitre,
message: sIframe,
closeButton:true,
scrollable:false
});

$('#oModalPDF').on('hidden.bs.modal', function (e) {
console.log('e', e);

$('#Finish').modal('show');

$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
});

return false;


});

我的 JSFiddle example

更新

如果您使用 PHP 解析处理程序脚本标记,则可以尝试这种方法。

模态初始化中仍然有 $('#oModalPDF').on('hidden.bs.modal', ... ) 处理程序,但也有:

window.dialogOnCloseHandler = null;

在关闭事件后存储您的callack。在全局范围内存储某些内容是一种糟糕的模式。因此,您应该针对您的情况重构回调存储。

$(document).ready(function(){  

window.dialogOnCloseHandler = null;

$('.show-pdf').on('click',function(e){
e.preventDefault();
var sUrl = $(this).attr('href');
var sTitre = $(this).attr('title');
var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
$.twModalPDF({
title:sTitre,
message: sIframe,
closeButton:true,
scrollable:false
});

$('#oModalPDF').on('hidden.bs.modal', window.dialogOnCloseHandler);

});

})

您的关闭后事件回调脚本:

 $(document).ready(function(){

window.dialogOnCloseHandler = function (e) {
console.log('e', e);

$('#Finish').modal('show');

$(this).off('hidden.bs.modal'); // Remove the 'on' event binding
};

});

在这里,您只需使用处理程序更新 window.dialogOnCloseHandler 属性即可。

JSFiddle example

关于javascript - 关闭当前模态后打开新模态( Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43467283/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com