How can I open a modal window with window.open()?

Question

How can I open a modal window with window.open() in Chrome, IE, opera, etc?

It is possible to do this?

Answer 1

Not window.open cannot work similar to modal windows, if what you mean with modal is the new window lock the window that called this modal or hide the address bar.

There used to be a function window.showModalDialog (still exists in some browsers, but is in disuse), example:

function modal()
{
    if (window.showModalDialog) {
      window.showModalDialog('http://answall.com',
        [1, 4], "dialogwidth: 450; dialogheight: 300; resizable: yes");
    } else {
       alert("Seu navegador não suporta mais este método");
    }
}

<button onclick="modal()">Testar</button>

Recently some browsers with Webkit and Blink technology, such as the Chrome 37+, Safari 6+ and Opera 24+ added support to the method .showModal();, this method only works with the tag <dialog>, example:

function exemplo() { 
    document.getElementById("test").showModal(); 
}

<dialog id="test">Olá mundo!</dialog>
<button onclick="exemplo()">Teste</button>

However there is no "real modal" that works on all browsers, but you can use jQuery or Bootstrap to simulate the Modal window (html+css+js), for example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Exemplo
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

The command open window.() opens a new browser window and offers some properties, for example:

window.open("http://www.w3schools.com", "_blank", "height=100, width=100, top=100, left=100");

Make this window act as one modal is a matter of working with specs that the command offers you and for example remove the status bar, remove the option to resize and scroll bars, etc.

All possible options are in the link above.

Answer 3

In fact, it is not possible to make a modal with window.open(), because it is a function that opens another page, in case you would have to use the window.Alert("Hello world!") to alert the user, window.confirm("Want to quit?") to ask the user and so on, recommend using this library in javascript and jquery: http://bootboxjs.com/

Very easy to be used and implemented on your website.