Link to home
Start Free TrialLog in
Avatar of Alan Mazursky
Alan MazurskyFlag for United States of America

asked on

How to open Model dialog window in ipad safari

Hi, Experts!

I am running my application on the IE. I am using window.showModalDialog method to open popup window. It is working fine. But now I need to run my application on the ipad safari. But showModalDialog() method was not working in safari Browser in Ipad,so I am using function.But functionality of showModalDialog() has been lost. Please guide me that how can I open popup in ipad safari. My application is very big. so solution should be quick and fast. I cannot make heavy changes in my application.

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Alan Mazursky


If I use jquery ui or jquery mobile then I need to make big changes in my application and I don't want this. Is there any easy and quick solution?
What about having a link to open up what you need using  target="_blank"

Do you have any other javascript libraries running  or just  pure html, css, js?
I am using simple html, css and js
How many places do you need the pop up?  You may need to selectively add jquery. The highest level of jquery accounts for IE.  Jquery 2 removes IE support (IE 10 should work).
There are lots of places. If I use jquery ui then I need to add div on each parent pages. It is lot of work. Is there any easy option?
Do all of your pages have separate files for css and js?  Or do you have using server side includes to bring in common files like css, javascript and headers and footers?  If you did it that way your job is easy.  If you did not, this is a good case why you should be developing that way....

Anywhere I have similar content I use include files.  If I have a 100 page site and now I want to include a new js and css file, I just need to update 2 files. One for common js and one for common css.  Any files I don't want common, get loaded separately.    The same is true for any header, footer etc.  

If you did do it the way I described, you can inject html and css via jquery.

Below is code for a 2 elements and I have injected a third div with the id modal and use jquery ui to give it the basic dialogue.,js,output

<!DOCTYPE html>
<link href="" rel="stylesheet" type="text/css" />
<script src=""></script>
<script src=""></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <div id="body">I am body</div>
  <div id="footer">I am footer</div>

Open in new window

 $(function() {
     $('#footer').after('<div id="modal">I am modal</div>');
      $( "#modal" ).dialog();

Open in new window