bootstrap modal backdrop is not disappearing when we click anywhere in screen with print window

问题

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.

Here is my code

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

回答1:

Use $('#myModal').modal('hide'); Within the openWin function

来源：https://stackoverflow.com/questions/49527431/bootstrap-modal-backdrop-is-not-disappearing-when-we-click-anywhere-in-screen-wi

标签

javascript

java

jquery

css

bootstrap-modal