how to make window open pop up Modal

Question

I am currently using window showModalDilog to open a modal pop up window which is not allowing the parent window to do any action   But in the google search  I found that it is not the standard method and various browsers has stopped supporting this function   In fact I am facing this problem in Opera  Opera gives me the javascript error and stops execution at that point  Nothing can happen after that error   So  I have only one option left and that is window open   But I want to disable parent window  likewise in showModalDilog    I tried below code to do so    lt script type  text javascript  gt                window  load function                     window opener document body disabled true                                 window  unload function                     window opener document body disabled false                   lt  script gt    But I failed in this   Can any one suggest me the code so that I can make window open pop up Modal   Hope I have explained my question well  Please ask me if you need more information   Thank You in advance      Update   I want to open an Url in the pop up window and then do certain action after the url is opened including submitting a form   My code to open a pop up   window open  https   www picpixa com wp-content plugins create-own-object plugin-google-drive index php    socialPopupWindow                    location no width 600 height 600 scrollbars yes top 100 left 700 resizable   no      Please help me      Update 1   It would also help me if I can open only one pop up window on the clicking of multiple buttons  I mean If i click on btn1 pop up named  temp  shall open  But when I click btn2 then instead of opening a new pop up  temp  shall reload  If you can give me suggestion on this  it would also help me to solve 80 percent problem

User · Answer

I was able to make parent window disable. However making the pop-up always keep raised didn't work. Below code works even for frame tags. Just add id and class property to frame tag and it works well there too.

In parent window use:

<head>    
<style>
.disableWin{
     pointer-events: none;
}
</style>
<script type="text/javascript">
    function openPopUp(url) {
      disableParentWin(); 
      var win = window.open(url);
      win.focus();
      checkPopUpClosed(win);
    }
    /*Function to detect pop up is closed and take action to enable parent window*/
   function checkPopUpClosed(win) {
         var timer = setInterval(function() {
              if(win.closed) {
                  clearInterval(timer);                  
                  enableParentWin();
              }
          }, 1000);
     }
     /*Function to enable parent window*/ 
     function enableParentWin() {
          window.document.getElementById('mainDiv').class="";
     }
     /*Function to enable parent window*/ 
     function disableParentWin() {
          window.document.getElementById('mainDiv').class="disableWin";
     }

</script>
</head>

<body>
<div id="mainDiv class="">
</div>
</body>

User · Answer

Modal Window using ExtJS approach   In Main Window   lt html gt   lt link rel  stylesheet  href  ext css  type  text css  gt   lt head gt       lt script type  text javascript  src  ext-all js  gt  lt  script gt   function openModalDialog         Ext onReady function             Ext create  Ext window Window             title   Hello           height  Ext getBody   getViewSize   height 0 8          width  Ext getBody   getViewSize   width 0 8          minWidth  730           minHeight  450           layout   fit           itemId    popUpWin                   modal true          shadow false          resizable true          constrainHeader true          items                 xtype   box               autoEl                         tag   iframe                        src   2 html                        frameBorder  0                                      show            function closeExtWin isSubmit         Ext ComponentQuery query   popUpWin   0  close         if  isSubmit              document forms 0  userAction value    refresh             document forms 0  submit             lt  head gt   lt body gt      lt form action  abc jsp  gt      lt a href  javascript openModalDialog    gt  Click to open dialog  lt  a gt      lt  form gt   lt  body gt   lt  html gt    In popupWindow 2 html   lt html gt   lt head gt   lt script type  text javascript  gt  function doSubmit action         if  action     save              window parent closeExtWin true          else            window parent closeExtWin false                lt  script gt   lt  head gt   lt body gt       lt a href  javascript doSubmit  save     title  Save  gt Save lt  a gt       lt a href  javascript doSubmit  cancel     title  Cancel  gt Cancel lt  a gt   lt  body gt   lt  html gt

User · Answer

You can t make window open modal and I strongly recommend you not to go that way   Instead you can use something like jQuery UI s dialog widget   UPDATE   You can use load   method       dialog   load  resource php   dialog  options      This way it would be faster but the markup will merge into your main document so any submit will be applied on the main window   And you can use an IFRAME       dialog   append     lt iframe gt  lt  iframe gt    attr  src    resource php    dialog  options      This is slower  but will submit independently

[javascript] how to make window.open pop up Modal?

Examples related to javascript

Examples related to jquery

Examples related to popupwindow