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

Question

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

Navigation

#1 by (7 votes)
#2 by (4 votes)
#3 by (3 votes)

5

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

Is it possible to do this?

javascript jquery

asked by anonymous 29.07.2015 / 01:45

3 answers

How to send strings in the URL via JS or jQuery? Is using version control on the production server a good practice?

score 7 · Answer 1

No window.open can not work similar to modal windows, if what you mean with modal is the new window block the window that called this modal or hide the address bar.

Formerly there was the window.showModalDialog > (still exists in some browsers, but is deprecated), example:

function modal()
{
    if (window.showModalDialog) {
      window.showModalDialog('http://pt.stackoverflow.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 Chrome 37+, Safari 6+ and Opera 24+ have added support for the method.

.showModal(); , this method works only with the <dialog> tag, example:

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

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

However, there is no "modal truth" that works in 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><!--LatestcompiledandminifiedCSS--><linkrel="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><!--Buttontriggermodal--><buttontype="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>

score 4 · Answer 2

The window.open () command opens a new browser window and gives you some properties, such as example:

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

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

All possible options are at the link above.

score 3 · Answer 3

In fact, it is not possible to do a modal with window.open () because it is a function that opens another page, in case you would have to use window.alert ("Hello world!") to alert the user, window.confirm ("Do you want to exit?") to ask the user and so on, I recommend you use this library in javascript and jquery: link

Very easy to use and implemented on your site.