CODEWITHSUNDEEP
javascriptasp.nethtml
ND's
ND's

Reputation: 2225

open window on click of button as modal dialog using javascript

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();
}

Upvotes: 3

Views: 31931

Answers (2)

Matt
Matt

Reputation: 1973

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.

Upvotes: 9

Dominik Kirschenhofer
Dominik Kirschenhofer

Reputation: 1205

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

2 Options:

  1. If you just want to let the user enter a search string you could use

    prompt("Please enter a search string:", "");

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

Upvotes: 2

Related Questions