Avatar of thenelson
thenelson asked on

place cross domain dialogue popup window in a popup window

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
Web DevelopmentHTMLJavaScriptWeb Languages and Standards

Avatar of undefined
Last Comment
Tom Beck

8/22/2022 - Mon
Roopesh Reddy

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...
ASKER
thenelson

>you can arrange the content in single popup window
That is what I want to do. How do I do that?
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
thenelson

That did it! Thank you!
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Tom Beck

You're welcome. Glad it worked for you. Thanks for the points.
ASKER
thenelson

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

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Tom Beck

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

ASKER
thenelson

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!
Tom Beck

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);
});
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
thenelson

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
Tom Beck

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>
ASKER
thenelson

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Tom Beck

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.