I have tried 4 different methods of trying to get a [X]Close button to work from a popup window. None have closed the popup window. Any other ideas?
From the calling link
<a href="xyz.htm" class="MCTopicPopup MCTopicPopupHotSpot a">
These embedded methods in xyz.htm do not close the popup window:
1. Text Link - <a href="#" onclick="window.close()">[X] Close</a>
2. Button - <button onclick="window.close()">Close</button>
3. <a href="javascript:window.close();">Close Window </a>
4. <p><a href="javascript:closeWindow();">Close Window (function)</a>
<script type = "text/javascript">
function closeWindow() {
// Close current window
window.close();
}
</script>
HTML window.close does not work in popup window
HTML window.close does not work in popup window
Last edited by lguser on Mon Oct 26, 2015 12:55 pm, edited 1 time in total.
-
Mike Kelley
- Propeller Head
- Posts: 68
- Joined: Fri Aug 22, 2014 12:24 pm
Re: HTML window.close does not work in popup window
The popup windows aren't actual windows - they're DIVs that get injected into the DOM by a script. You could remove the two DIVs (one that darkens the background, the other that contains the popup) with your script.
I haven't actually tested this, but it should work fine.
Code: Select all
<script>
$('.MCTopicPopupHotSpot').click(function () { // This should be whatever the class name is of the 'Close popup' link
$('div.MCTopicPopupContainer, div.dark').remove();
});
</script>Re: HTML window.close does not work in popup window
After two days of scouring the Web and testing I have found a fairly simply solution. Not even MadCap support was able to figure this out.
How to add [X}Close link to popup window
Note: Popup window is an iFrame. The window.close() HTML function does not work.
1. In the calling page add this javascript to the bottom of page (before </body>
<script type = "text/javascript">
var closeIFrame = function() {
$('.MCTopicPopupContainer').remove();
$("#mc-background-tint").remove();
}
</script>
2. In popup topic add this HTML code
<p><A HREF="#" onClick="parent.closeIFrame();">[X]Close</A></p>
NOTE: If you put the code from Step 1 in your Master Page and you create a separate Master Page for the popup (i.e. Master_Popup_page.flmsp) with the code from Step 2 the button appears for any popup.
How to add [X}Close link to popup window
Note: Popup window is an iFrame. The window.close() HTML function does not work.
1. In the calling page add this javascript to the bottom of page (before </body>
<script type = "text/javascript">
var closeIFrame = function() {
$('.MCTopicPopupContainer').remove();
$("#mc-background-tint").remove();
}
</script>
2. In popup topic add this HTML code
<p><A HREF="#" onClick="parent.closeIFrame();">[X]Close</A></p>
NOTE: If you put the code from Step 1 in your Master Page and you create a separate Master Page for the popup (i.e. Master_Popup_page.flmsp) with the code from Step 2 the button appears for any popup.
Last edited by lguser on Thu Aug 06, 2015 9:02 am, edited 1 time in total.
-
Mike Kelley
- Propeller Head
- Posts: 68
- Joined: Fri Aug 22, 2014 12:24 pm
Re: HTML window.close does not work in popup window
That works too. However, please don't assume that what pops up is an iframe (an iframe is also not an Apple product 
). It's not. When a user clicks a popup link, two divs are injected into the DOM; one that darkens the background by applying a semi-transparent, black overlay <div class="dark" id="mc-background-tint">, and another that displays the actual popup content <div class="MCTopicPopupContainer needs-pie"> .
Glad you worked out your own solution!
). It's not. When a user clicks a popup link, two divs are injected into the DOM; one that darkens the background by applying a semi-transparent, black overlay <div class="dark" id="mc-background-tint">, and another that displays the actual popup content <div class="MCTopicPopupContainer needs-pie"> .Glad you worked out your own solution!
Re: HTML window.close does not work in popup window
After some experimenting here are some enhancements.
1. Created a custom master_popup_page for a popup topic.
2. Inserted the <a> link in the master page.
=> By applying the master_popup_page to any topic the button was available.
However, when the popup topic is indexed and the topic is viewed from the index selection the close button was visible (without any purpose or action). So I created the following to include in the master_popup_page which hides the Close button.
Note: insert in the <body>, above the topic proxy.
<p id="cbutton" style="text-align: right;">
<A HREF="#" onClick="parent.closeIFrame();">
<img src="../images/close_button.png" style="width: 20px;height: 20px;" />
</A>
</p>
<script type="text/javascript">
referrer = document.referrer;
term = "xyz.htm"; //returned from non-parent call, defined by Output File (under Target)
index = referrer.indexOf(term);
if(index=="-1") { //-1 is popup with parent url
var x = document.getElementById("cbutton").outerHTML;
document.getElementById("cbutton").outerHTML = x;
}
else {
document.getElementById("cbutton").style.visibility='hidden';
};
</script>
1. Created a custom master_popup_page for a popup topic.
2. Inserted the <a> link in the master page.
=> By applying the master_popup_page to any topic the button was available.
However, when the popup topic is indexed and the topic is viewed from the index selection the close button was visible (without any purpose or action). So I created the following to include in the master_popup_page which hides the Close button.
Note: insert in the <body>, above the topic proxy.
<p id="cbutton" style="text-align: right;">
<A HREF="#" onClick="parent.closeIFrame();">
<img src="../images/close_button.png" style="width: 20px;height: 20px;" />
</A>
</p>
<script type="text/javascript">
referrer = document.referrer;
term = "xyz.htm"; //returned from non-parent call, defined by Output File (under Target)
index = referrer.indexOf(term);
if(index=="-1") { //-1 is popup with parent url
var x = document.getElementById("cbutton").outerHTML;
document.getElementById("cbutton").outerHTML = x;
}
else {
document.getElementById("cbutton").style.visibility='hidden';
};
</script>