当我们点击带有打印窗口的屏幕中的任何地方时,bootstrap模态背景不会消失 [英] bootstrap modal backdrop is not disappearing when we click anywhere in screen with print window

查看:62
本文介绍了当我们点击带有打印窗口的屏幕中的任何地方时,bootstrap模态背景不会消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am using print button on bootstrap modal,

问题是当我点击屏幕的任何其他区域时,模态背景并没有消失打开。

The problem is modal backdrop is not disappearing once I click any other area of screen when print window is open.

我们关闭打印窗口然后点击屏幕的任何其他区域时,它非常有效。

It works perfectly when we close print window then click any other area of screen.

为了更好地理解你可以看到这张图片。

for better understanding you can see this image.

这是我的代码

<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>


推荐答案

使用
$('#myModal' ).modal( '隐藏');
openWin 功能

这篇关于当我们点击带有打印窗口的屏幕中的任何地方时,bootstrap模态背景不会消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆