Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Chrome Modal Window BUG

    I have a problem with a modal window in google chrome (actually it seems that MANY PEOPLE have this problem). well, the problem occurs only in in Google Chrome, my modal window contains a form but in chrome the modal window do not "block" the parent window,mit does not prevent user from clicking things on parent window, and if the user clicks again on the modal window call in the parent window, which is a "contact us" link that contains all the details of the property that the user is seeing on our website, other modal windows open, each click opens a different modal window, BUT ONLY ONE OF THEM WILL SUBMIT THE FORM, the other opened modal windows dont work, meaning that only the first opened modal window will submit the form, the others simply dont submit, if you click on submit form nothing happens...Guys, please help, here is my script, i red that using lightbox instead of showmodaldialog fix this issue, but i am not able to change the script because i am a real estate agent and not a real developer. please, someone can help me to change this script usong lightbox instead of showmodaldialog??

    Code:
    function openPopup(){ if (window.showModalDialog){ window.showModalDialog('<?php echo $rutaC ; ?>','win2','<?php echo $statusC; ?>' + "; dialogHeight:500px; dialogWidth:450px;"); }else{ window.open ('<?php echo $rutaC ; ?>',"win2",'<?php echo $statusC; ?>' + ', modal=yes,width=450,height=500'); } }
    Also, I found another possible workaround, The idea of this post is to append a div over my content. It works apparentely but there is another problem, the "obscured parent window" remains obscured when closing modal window and parent window is not clickable anymore, this happens also in firefox and internet explorer...

    any way to fix this??

    see the code:

    Code:
    function openPopup(){
     var body = document.getElementsByTagName('body');
     var child = document.createElement('div');
     child.style['position'] = 'fixed';
     child.style['top'] = '0';
     child.style['left'] = '0';
     child.style['opacity'] = '0.75';
     child.style['background'] = 'black';
     child.style['zIndex'] = '9999999';
     child.style['width'] = window.innerWidth + 'px';
     child.style['height'] = window.innerHeight + 'px';
     child.id = 'specialDiv';
     body[0].appendChild(child);
    
     if (window.showModalDialog){
         var w = window.showModalDialog('<?php echo $rutaC ;
    ?>','win2','<?php echo $statusC; ?>', "dialogHeight:500px;
    dialogWidth:400px;");
     }else{
           var w = window.open('<?php echo $rutaC ; ?>','win2','<?php
    echo $statusC; ?>' + ', modal=yes, width=400,height=500');
    }
       w.addEventListener('onunload', function(){
           var special = document.getElementById('specialDiv');
           special.style['display'] = 'none';
     });
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    it seems to me like you are not using openModalDialog correctly - the return value can be used to get access to user input, it will never hold a reference to the dialog itself.

    also, being that a modal stops the script from running (much like an alert), there is no need for an onclose event - simply putting the code after the modal opening code is enough to ensure that it will run second.

    the following seems to do more or less what you want (although the behaviour of the modal is different in Chrome as compared to IE & FF). The ugly little checkIt function is in there because Opera seems to struggle with assigning a true unload event to a window. But maybe someone else can see a better way of doing that.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #specialDiv{
    background-color:#111;
    opacity: 0.65;
    position:absolute;
    z-index: 9001;
    top:0px;
    left:0px;
    width:100%;
    display:none;
    }
    </style>
    
    </head>
    <body>
    <button onclick="openPopup()">click</button>
    <div id="specialDiv"></div>
    
    <script type="text/javascript">
    function openPopup() {
    	if (typeof window.innerWidth != 'undefined') {
    		viewportheight = window.innerHeight;
    	} else {
    		viewportheight = document.documentElement.clientHeight;
    	}
    	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
    		blanket_height = viewportheight;
    	} else {
    		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
    			blanket_height = document.body.parentNode.clientHeight;
    		} else {
    			blanket_height = document.body.parentNode.scrollHeight;
    		}
    	}
    
    	var special = document.getElementById('specialDiv');
    	special.style.height = blanket_height + 'px';
    	special.style.display = "block";
    
    	if (window.showModalDialog) {
    		window.showModalDialog('http://www.google.com', 'win2', "dialogHeight:500px;dialogWidth:400px;");
    		special.style.display = 'none';
    	} else {
    		var w = window.open('http://www.google.com', 'win2', 'width=400px,height=500px');
    		checkIt(w);
    	}
    }
    
    function checkIt(w) {
    	if (w.closed) {
    		document.getElementById('specialDiv').style.display = "none"
    	} else {
    		setTimeout(function () {
    			checkIt(w)
    		}, 100)
    	}
    }
    </script>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •