How to show a modal on a new window using jQuery

Question

so I was trying to show modal on a new window until now I use

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

which show it as a customize window , but I want to open a new browser window and print the modal inside it.

I want to do this because if I just use modal('show'); and my parent page refreshes in the background, (I am using window.location.reload(true); to refresh the parent page, that's why it closes the modal, I couldn't find how to refresh the whole parent page using ajax) it will close the modal window and I don't want this.

Is there any function that I can use to open the modal on a new window?

because i need to call a javascript function and passe data to the modal and show it i . — coder great, Oct 05 '18 at 07:40
and i can see how to test if the open was opend or not to just show it everytime i reload — coder great, Oct 05 '18 at 07:41
you can refer link https://stackoverflow.com/questions/40847454/make-any-links-in-a-bootstrap-modal-open-in-a-new-window if this can help you — Uttam Gupta, Oct 05 '18 at 08:15

score 0 · Answer 1 · answered Oct 05 '18 at 10:55

i have created 2 file; file 1 has this code,

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

and 2nd file has this code

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

for this is working, try this.

How to show a modal on a new window using jQuery

1 Answers1