Question

我正在开发一个类似的功能：

点击链接
根据点击的链接加载页面后，将显示特定的模态窗口
继续进行模态
功能结束

我遇到的问题是模式无法加载，或者它会加载但在页面加载后立即关闭。这是我使用

$(function(){
    $('#new-po').click(function(){
        window.location.href= $(this).attr('href');
        bootbox.dialog({
            title: "Create New Purchase Order",
            message: '<div class="row">'+
            '<div class="col-md-12">'+
            '<form action="" method="post" id="create-po-form">'+
            '<div class="form-group">'+
            '<div class="col-md-12">'+
            '<div class="form-group row">'+
            '<div class="col-md-6">'+
            '<label>Invoice Number</label>'+
            '<input type="text" class="form-control" id="inv_num"/>'+
            '</div>'+
            '<div class="col-md-6">'+
            '<label>Vendor</label>'+
            '<input type="text" class="form-control" id="vendor"/>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '<div class="col-md-12">'+
            '<div class="form-group row">'+
            '<div class="col-md-6">'+
            '<label>Invoice Number</label>'+
            '<input type="text" class="form-control" id="total"/>'+
            '</div>'+
            '<div class="col-md-6">'+
            '<label>Vendor</label>'+
            '<select class="form-control" id="status">'+
            '<option value="" selected> -Status-</option>'+
            '<option value="Open">Open</option>'+
            '<option value="Closed">Closed</option>'+
            '<option value="Void">Void</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</form>'+
            '</div>'+
            '</div>',
            buttons:{
                success:{
                    label: "Create PO",
                    className: 'btn-success',
                    callback:function(){


                    }
                }
            },
            onEscape: function(){

            }
        });
    });
});

它使用了bootbox扩展，到目前为止，我发现它没有冲突，所以我将继续使用它，直到另有说明。我尝试过使用$(document).ready()，$(window).load()，$(function(){}以及其他一些内容，但没有任何效果。想法？

同样对于引用，我在每个页面上的页面结构如下所示：

<!-- The header contains the html starting tags and the head section -->
<? include "/inc/header/overall_header.php"; ?>
    <!-- html content here -->
<!-- The footer contains the scripts for the pages and the html ending tag -->
<? include "/inc/header/overall_header.php"; ?>

Answer 1

您应该将window.location.href= $(this).attr('href');移动到对话框的成功处理程序

Answer 2

刷新页面后，将停止javascript并加载新脚本。

加载后，您应该在新页面中激活启动箱代码。

例如：

页面＃1：

$(function(){
    $('#new-po').click(function(){
        window.location.href= $(this).attr('href');   // point to page#2
        // at this point you can't show bootbox or modify the page!
        //  - the browser will simply refresh the page to a new url and your changes will not be shown
    });
}

第2页：

$(function(){
    // show bootbox ...
})

还有其他选项可以达到你想要的效果 - 使用iframe在一个框架中加载页面，或者（更好）用ajax加载html并显示它。

加载页面然后启动bootbox

2 个答案: