open window on click of button as modal dialog using javascript

Question

I have to open a window when a button is clicked, as a modal dialog using JavaScript. I have used window.open, but it shows me two instances, the parent page and the pop-up page. When the pop-up page is open, then do not allow the user to click on the parent page.

function openWindow() {
  var w = 950;
  var h = 350;
  var t = 0;
  var l = 0;
  var scrollbars = 1;
  var modal = 'yes';

  var reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
  reportWindow.focus();
}

see this may be helpful to you okonet.ru/projects/modalbox/index.html — Waqar Janjua
– Waqar Janjua, Commented Jul 20, 2012 at 7:32

Sergio · Accepted Answer · 2019-06-21 08:13:11Z

9

Your code line,

reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);

is missing an '=' symbol after modal. It should be,

reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal=' + modal);

To open window as dialog box,

 <html>
    <body>
    <script language="JavaScript">
    function openWindow() {
       if (window.showModalDialog) {
window.showModalDialog("http://example.com","name",
"dialogWidth:255px;dialogHeight:250px");
} else {
window.open('http://example.com','name',
'height=255,width=250,toolbar=no,directories=no,status=no, linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
    } 
    </script>
    <button onclick="openWindow();">Open window</button>
    </body>
    </html>

If the above code is not working, please use jQuery modal dialog. You can load any urls to dialog using an iframe.

edited Jun 21, 2019 at 8:13

Sergio

8810 bronze badges

answered Jul 20, 2012 at 7:20

matt

1,9731 gold badge20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Waqar Janjua Over a year ago

read the question again.

but it shows me two instances parent page as well as pop up page. when popup page is open then donot allow to click on parent page.

ND's Over a year ago

user970349 :: See Title of quetion i already ask MODAL DIALOG IN JAVASCRIPT

Waqar Janjua Over a year ago

user window.showmodaldialog also does not work as modal dialog box i checked it.

matt Over a year ago

window.showmodaldialog will not work in all browsers. please check updated answer

matt Over a year ago

@john Please check your code 'reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal); reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal); The modal is missing an '=' symbol.

|

Dominik Kirschenhofer · Accepted Answer · 2012-07-20 07:33:24Z

2

"window.open" will not work. This command always just opens a popup wich is not "always" on top of its parent.

2 Options:

If you just want to let the user enter a search string you could use
```
prompt("Please enter a search string:", "");
```
If you have a complexe search form, you have to create a modal dialog for your own. There are frameworks which provide this functionality (google for "jQuery") or you create it for your own. Should not be hard, tell me if you need some help!

answered Jul 20, 2012 at 7:33

Dominik Kirschenhofer

1,2151 gold badge14 silver badges28 bronze badges

2 Comments

ND's Over a year ago

PLEADE READ MY QUETION ATLEAST ONCE I HAVE TO OPEN MODAL POPUP AS PAGE ON BUTTON CLICK

Dominik Kirschenhofer Over a year ago

I did and as I told you, it is not possible to use window.open to do this secure and make it working in all browsers. You have to generate the modal windown in javascript using jQuery or something written by our own.

Collectives™ on Stack Overflow

open window on click of button as modal dialog using javascript

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related