We help IT Professionals succeed at work.

place cross domain dialogue popup window in a popup window

724 Views
Last Modified: 2013-12-30
I use docmein.com to allow our patients to schedule their own appointments. I do not have programming access of docmein.com. Our patients are frequently confused on how to use docmein.com. I have asked the owners of docmein.com to redesign their site to make it more user friendly but they have placed this on a low priority.

In the meantime, I have placed their dialogue popup window over a webpage with instructions behind it. See: https://www.barnwellmd.com/patients/docmeinframe.html.

Since my instructions are in the background, greyed out, they are easy to miss.  Is it possible to place this modal popup window inside my own modal popup window with instructions next to it? If so, how? TiA
Comment
Watch Question

Roopesh ReddyIT Analyst
Top Expert 2012

Commented:
Hi,

Why to place nested popup windows? Instead you can arrange the content in single popup window!

It's will be better user experience!

Hope it helps u...
CERTIFIED EXPERT

Author

Commented:
>you can arrange the content in single popup window
That is what I want to do. How do I do that?
CERTIFIED EXPERT
Top Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
That did it! Thank you!
CERTIFIED EXPERT
Top Expert 2015

Commented:
You're welcome. Glad it worked for you. Thanks for the points.
CERTIFIED EXPERT

Author

Commented:
Thanks again. Did you see my other open question: https://www.experts-exchange.com/Q_28312648.html?
CERTIFIED EXPERT

Author

Commented:
tommyBoy,

I just discovered the code you provided does not work in IE & FF. It just creates a blank page. I should have checked them before.  Any suggestion on how to correct this?
CERTIFIED EXPERT
Top Expert 2015

Commented:
Try this version. It uses a jquery plugin to detect DOM node insertion found here instead of the unreliable javascript DOMNodeInsertion event. You will see that I have pasted the minified version of the plugin script directly into the markup. On your finished page of course, you would have this in a separate file. Currently I do not have a convenient way of testing in IE but it works in Firefox on my Mac.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript" language="javascript"
src="https://docmein.com/app/widget/widget.nocache.js" ></script>
<img src="../img/SinglePixel.png"
id="newAppointment_12801944916418372" style="cursor:pointer">
<article id="instructions" style="font-color:#fff;font-weight:bold;display:none">
<span style="font-size:1.5em">NEW PATIENTS: </span>
<br>
<span style="font-size:1em">Select </span>Service <select><option value="v">1ST appointment for NEW PATIENTS (2 hour)</option></select>
<br>
<span style="font-size:1em">Schedule the appointment at least one week in the future. (This gives us time to get records from other providers.)</span>
<br><br>
<span style="font-size:1.5em">EXISTING PATIENTS: </span>
<br>
<span style="font-size:1em">Do not use this. Return to www.barnwellmd.com and select "Existing patients" in the left hand menu.</span>
</article>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// insertionQuery v0.2.1 (2013-11-23) 
// license:MIT 
// naugtur <naugtur@gmail.com> (http://naugtur.pl/) 
var insertionQ=function(){"use strict";function a(a,b){var d,e="insQ_"+h++,f=function(a){(a.animationName===e||a[j]===e)&&(c(a.target)||b(a.target))};d=document.createElement("style"),d.innerHTML="@keyframes "+e+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n@"+k+"keyframes "+e+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n"+a+" { animation-duration: 0.001s; animation-name: "+e+"; "+k+"animation-duration: 0.001s; "+k+"animation-name: "+e+";  } ",document.head.appendChild(d);var g=setTimeout(function(){document.addEventListener("animationstart",f,!1),document.addEventListener("MSAnimationStart",f,!1),document.addEventListener("webkitAnimationStart",f,!1)},20);return{destroy:function(){clearTimeout(g),d&&(document.head.removeChild(d),d=null),document.removeEventListener("animationstart",f),document.removeEventListener("MSAnimationStart",f),document.removeEventListener("webkitAnimationStart",f)}}}function b(a){a["-+-"]=!0}function c(a){return g&&a["-+-"]===!0}function d(a){return c(a.parentNode)?a:d(a.parentNode)}function e(a){for(b(a),a=a.firstChild;a;a=a.nextSibling)void 0!==a&&1===a.nodeType&&e(a)}function f(f,g){var h=[],i=function(){var a;return function(){clearTimeout(a),a=setTimeout(function(){h.forEach(e),g(h),h=[]},10)}}();return a(f,function(a){if(!c(a)){b(a);var e=d(a);h.indexOf(e)<0&&h.push(e),i()}})}var g,h=100,i=!1,j="animationName",k="",l="Webkit Moz O ms Khtml".split(" "),m="",n=document.createElement("div");if(n.style.animationName&&(i=!0),i===!1)for(var o=0;o<l.length;o++)if(void 0!==n.style[l[o]+"AnimationName"]){m=l[o],j=m+"AnimationName",k="-"+m.toLowerCase()+"-",i=!0;break}return function(b,c){return i&&b.match(/[^{}]/)?(g=c?!1:!0,g&&e(document.body),{every:function(c){return a(b,c)},summary:function(a){return f(b,a)}}):!1}}();

</script>
<script type="text/javascript">
$(window).load(function() {
	document.getElementById("newAppointment_12801944916418372").click();
});
insertionQ('.gwt-DialogBox').every(function(element){
	$('.gwt-DialogBox').css('width', '400px');
   	$('#instructions').appendTo('.gwt-DialogBox').show();
});
</script>
</body>
</html>

Open in new window

CERTIFIED EXPERT

Author

Commented:
The new code is working in Chrome, FF and IE however the docmein popup is now further down on the page and the text ("EXISTING PATIENTS:" etc) is not displaying as it is beyond the page. Is it possible to place the text above the docmein popup or move the docmein popup further up on the screen?

Thanks!
CERTIFIED EXPERT
Top Expert 2015

Commented:
You can place the text on top of the popup simply by using "prependTo" instead of "appendTo".

insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
});

The popup's position on the page is determined by a dynamically loaded script after the popup is part of the DOM. This script doesn't know to allow for the extra height of the popup due to the addition of the instructions. I assume you still have no way of modifying this script from docmein. Your only choice then is to modify the position of the popup again AFTER the docmein script is finished modifying it.

So...resetting the top position like this DOES NOT WORK (in Firefox):
      
insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
      $('.gwt-DialogBox').css({top:'20px'})
});

..because the docmein script is likely still running and is setting "top" to something else.  Setting the "width" as I have done here DOES work because the docmein script is not modifying the width.

In order to modify the "top" position with your script, you need to build in a slight delay to allow the docmein script to finish. Play with the delay to make sure it works in every browser. Here I have set it to 50 milliseconds. I tested only in Firefox where it proved to be enough of a delay to allow me to change the top position.


insertionQ('.gwt-DialogBox').every(function(element){
      $('.gwt-DialogBox').css({width:'400px'})
         $('#instructions').prependTo('.gwt-DialogBox').show();
      setTimeout(function(){$('.gwt-DialogBox').css({top:'20px'})}, 50);
});
CERTIFIED EXPERT

Author

Commented:
Quite strange: The code works perfectly when I run it from my hard drive. When I run it from my web server, it works fine in Chrome and IE but is blank in FF.  Here it is published to my web server: https://www.barnwellmd.com/docmeinframe.html
CERTIFIED EXPERT
Top Expert 2015

Commented:
Quite simple. Your published web site is on a secure socket layer (https). Your are requesting a jquery library that is not on a secure socket layer with this line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

You are trying to mix secure content with non-secure. Some browsers will balk at this. The page is blank in Chrome v31 as well.

Simple fix SHOULD be just adding an "s" to the jquery library request:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Alternately, you could copy the jquery library to a directory inside your root directory like "js" then call the library directly from the web server's hard drive.

<script src="js/jquery.min.js" type="text/javascript"></script>
CERTIFIED EXPERT

Author

Commented:
That took care of it. I missed that. Thanks!

I wonder if you can look at this question: https://www.experts-exchange.com/Microsoft/Development/MS_Access/Q_28326893.html

If you are not skilled in VBA, that's ok. I am and maybe between the two of us we can figure it out.
CERTIFIED EXPERT
Top Expert 2015

Commented:
I looked at that question but I don't have much to offer. I worked exclusively with Microsoft technologies for years but abandoned all that a couple of years back. I no longer have a handy testing platform. My spidey sense tells me you are barking up the wrong tree by comparing the headers produced using VBA vs just an html form. Authorization generally happens on a different level.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.