如何使用jQuery在新窗口上显示模式

时间:2018-10-05 07:37:12

标签: javascript jquery ajax

所以我一直试图在新窗口上显示模式,直到现在我使用

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

将其显示为自定义窗口,但我想打开一个新的浏览器窗口并在其中打印模式。

我想这样做是因为如果我只使用modal('show');并且我的父页面在后台刷新,(我正在使用window.location.reload(true);来刷新父页面,这就是为什么它关闭模态,我找不到如何使用ajax刷新整个父页面),它将关闭模态窗口,我不想要这个。

我可以使用任何功能在新窗口上打开模式吗?

1 个答案:

答案 0 :(得分:0)

我已经创建了2个文件; 文件1包含此代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <button type="button" class="btn btn-info btn-lg" onclick="window.open('file:///C:/Users/Admin/Desktop/a.html'); ">Open Modal</button>
        </div>
    </body>
</html>

第2个文件具有此代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("#myModal").modal();
        </script>
    </body>
</html>

为此有效,请尝试此操作。