当我们单击带有打印窗口的屏幕中的任意位置时,引导模式背景不会消失

Posted

技术标签:

【中文标题】当我们单击带有打印窗口的屏幕中的任意位置时,引导模式背景不会消失【英文标题】:bootstrap modal backdrop is not disappearing when we click anywhere in screen with print window 【发布时间】:2018-09-06 17:18:26 【问题描述】:

我在引导模式上使用打印按钮,

问题是,当我点击屏幕的任何其他区域打印窗口打开时,模态背景不会消失。

我们关闭打印窗口然后点击屏幕的任何其他区域时,它会完美运行。

为了更好地理解,您可以查看此图像。

这是我的代码

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <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.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            function openWin()
            
                var myWindow = window.open('', '', 'width=200,height=100');
                myWindow.document.write("<p>This is 'myWindow'</p>");

                myWindow.document.close();
                myWindow.focus();
                myWindow.print();
                myWindow.close();
            
        </script>
    </head>
    <body>

        <div class="container">
            <h2>Modal Example</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <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">
                            <input type="button" value="Open window" onclick="openWin()" />

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】:

我认为您的问题与此处相同 - ***.com/questions/15874225/… 【参考方案1】:

使用 $('#myModal').modal('hide'); openWin 函数内

【讨论】:

以上是关于当我们单击带有打印窗口的屏幕中的任意位置时,引导模式背景不会消失的主要内容,如果未能解决你的问题,请参考以下文章

当单击带有验证的确定按钮时,引导 vue 模式不隐藏

当用户点击屏幕上的任意位置时调用函数

在 iPhone 屏幕上的任意位置点击时关闭工具提示

根据屏幕位置引导下拉菜单自动下拉?

单击时在新窗口中打印图像的最简单方法是啥?

窗口/舞台失去焦点时的事件