asked on

Looking for an alternative to window.showModalDialog

The app I am working on used windows.showModalDialog which depreciated, so I replaced it with window,.open which workd fine but with one issue - it is not modal. I have found that one can use window.open Dialog instead but replacing window.open with window.openDialog broke my links.

I had

    ret = window.open(target, "", "scrollbars=no,location=no,statusbar=no,menubar=no,resizable=no,width=500,height=300");

Open in new window

which worked, so I tried:

    ret = window.openDialog(target, "", "scrollbars=no,location=no,statusbar=no,menubar=no,resizable=no,width=500,height=300");

Open in new window

which did not.

I was also looking into using JQuery UI dialog or AJAX dialog, but it seems that those would just display limited content that you specify and I need to display an actual page. Can anyone help?

ASKER CERTIFIED SOLUTION

Big Monty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

YZlat

ASKER

@Big Monty, what type of control is #dialog? is it a div?

Big Monty

it can be, its the markup for your dialog box. in this case, it can be just an empty div on your page

YZlat

ASKER

I have tried your example but all that appeared on the page on click of a link is a close button. No content was shown

<html>
<head>
 <script src="Script\jquery-2.2.0.js"></script>
  <script src="Script\jquery-ui-1.8.24.js"></script>
 <script>
 $( document ).ready(function() {
$("#hlk1").click(function(){ 
	// initialize dialog
var dlg = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dlg.load('www.google.com').dialog('open');
});
});

 </script>

</head>
<body>
<a href="#" id="hlk1" >Click here</a>
<div id="dialog">
  
</div>
</body>
</html>

Open in new window

Big Monty

your fiddle there is no reference to jquery, can you fix and then resend?

YZlat

ASKER

I got it to work. I replaced www.google.com by test.html. there is only one thing - in Chrome I got an error message

XMLHttpRequest cannot load file:///C:/Users/MyUser/Desktop/test.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Open in new window

How could these be cross origin requests if both files are in the same folder on the same machine?

Big Monty

whats the code?

YZlat

ASKER

<html>
<head>
 <script src="Scripts\jquery-2.2.0.js"></script>
  <script src="Scripts\jquery-ui-1.8.24.js"></script>
 <script>
 $( document ).ready(function() {
$("#hlk1").click(function(){ 
	// initialize dialog
var dlg = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dlg.load('test.html').dialog('open');
});
});

 
 
 </script>

</head>
<body>
<a href="#" id="hlk1" >Click here</a>
<div id="dialog">
  
</div>
</body>
</html>

Open in new window

Big Monty

I'm not sure why thats happening, if the file is located in your root folder. I would open another question up and see if other experts have any ideas...

YZlat

ASKER

Just a side note for anyone who has the same issue. "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." as suggested by error, I needed to use one of the listed prorocols to be able to send cross-origin requests. So I created a project on localhost and cross-origin request worked fine.

Thanks Big Monty! You have been a great help