加载页面，然后启动bootbox

Load page then launch bootbox

本文关键字：启动 bootbox 然后 加载      更新时间：2023-09-26

我正在开发一个类似于的函数

  1. 单击链接
  2. 根据单击的链接加载页面后，将显示一个特定的模式窗口
  3. 继续模态
  4. 功能结束

我遇到的问题是，要么模态不会加载，要么它会加载，但在页面加载后立即关闭。这是我使用的功能

$(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"; ?>

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

刷新页面后，将停止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并显示它。

相关文章：