how to show only one popup at a time?
i have created one page called parent.html. On parent page, i have two links one is register and another is login.
if i click register then register page open as child window
but
if i click login then already opened child box(register) should close and login child window should open or all previously opened child box should disappear.
my code is as below
<input type="button" value="login" onclick="ShowPopup('login.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
<input type="button" value="register" onclick="ShowPopup('register.asp')" />
<script type="text/javascript">
var popup;
function ShowPopup(url) {
popup = window.open(url, "self", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
</form>
i replaced "popup" with "self". now only one child window open at a time instead of multi and working perfect.
but when i close child window, parent page is not refreshing.
child window code as below
<form id="form1" runat="server">
<input type="button" value="Refresh Parent" onclick="RefreshParent()" />
<script type="text/javascript">
function RefreshParent() {
if (window.opener != null && !window.opener.closed) {
window.opener.location.reload();
}
}
window.onbeforeunload = RefreshParent;
</script>
</form>
please help me out
First thing , there is no need to define variable & function again .. and now coming to solution as --
<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,
menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
}
</script>
In Your Child Page ,Head Section (To refresh parent window on close)
<script>
window.onunload = refreshParent;
function refreshParent() {
if(window.opener)
window.opener.location.reload(true);
}
</script>
By default, the reload() method reloads the page from the cache, but you can force it to reload the page from the server by passing parameter to true.
-- OR --
You can also some code in parent while you open a child window and look up for its child window if its close refresh itself..
<script type="text/javascript">
var popup;
var lookupTimer=null;
function ShowPopup(url) {
if(popup)
{
popup.close();
}
popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,
statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup.focus();
lookupTimer = setInterval(function(){ loolUpChild(); }, 1000);
}
function loolUpChild()
{
if((popup.closed))
{
window.location.reload(true);
clearInterval(lookupTimer);
}
}
</script>
create a global variable and maintain your flag if previous popup is open then close first and open new
Like
if(popup){
popup.close();
popup=false;
}
after that open new
window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
popup = true;
Related
I have written JavaScript code which opens the application in new window.
But the problem is, when we switch patient from A to B it opens another window. So, currently, there will be 2 windows, one for patient A and another for B which is a clinical risk. It should close A and then open B.
What I want is that, when we switch patient, it should close the existing open window browser and open a new window for another patient.
<div id="openWrapper">
<div id="openEdge"></div>
</div>
$(document).ready(function () {
var params = [
'height=' + screen.height,
'width=' + screen.width,
'scrollbars=yes',
'resizable=yes',
'location=no'
].join(',');
var popUp;
function showModal() {
if (popUp)
popUp.close();
popUp = window.open('#Url', "_blank", params);
popUp.moveTo(0, 0);
popUp.focus();
LoadModal();
}
function LoadModal() {
var bcgDiv = document.getElementById("openEdge");
bcgDiv.style.display = "block";
}
function OnUnload() {
if (false == popUp.closed) {
popUp.close();
}
}
window.onunload = OnUnload;
showModal();
});
I am trying to write a simple programm, that will have a button.
When I click the button it will open up a popup window.
When I close the popup I want my parent page to be reloaded
After the window is closed, I want the parent page to know, that the child was closed, so it should print some message.
I tried to implement this setting a cookie in the js function and reading it in the php. Unfortunaly as soon as I close the window once, I always get the print message, when I reload the page. Here is my code:
<?php
if (isset($_COOKIE['cookie'])) {
unset($_COOKIE['cookie']);
setcookie("cookie", "", time()-3600, "/");
echo "window closed";
}
?>
<script>
function popup() {
var win = window.open("", "Page Title", "toolbar=no, location=no");
var win_timer = setInterval(function() {
if(win.closed) {
window.location.reload();
clearInterval(win_timer);
document.cookie = "cookie=cookieValue";
}
}, 100);
}
</script>
<input type="button" value="Open popup" onclick="javascript: return popup()" />
I have a Parent page in which, I have added a search functionality.
like below
function FunClick(StrPriCaption) {
var StrPriHTML = "";
if (StrPriCaption == 'AdvSearch') {
//document.getElementById('TxtCondition').value = "AdvSearch";
//form1.submit();
var StrPriReturnValue = "";
window.open('FrmInwardHdrAdvanceSearch.aspx', null, 'height=370,width=630,top=0,left=0,resizable=yes,scrollbars=yes');
}
}
And it works perfectly. It opens a pop up window page for me to search for.
But now what I want is, IF I close the pop up,I want to refresh the parent page.
I tried with below code in Child page, but it didn't refreshed the parent page.
function CloseWindow() {
window.close();
window.opener.location.reload();
}
How can I do this using Javascript?
Method 1
<script>
function popup() {
var win = window.open("", "Page Title", "toolbar=no, location=no");
win.document.body.innerHTML = 'Close Me';
}
</script>
Open Me
It creates a popup with a link to close the window and refresh parent.
Demo: https://jsfiddle.net/eke4f72r/
Method 2
<script>
function popup() {
var win = window.open("", "Page Title", "toolbar=no, location=no");
var win_timer = setInterval(function() {
if(win.closed) {
window.location.reload();
clearInterval(win_timer);
}
}, 100);
}
</script>
Open Me
It detects from the parent window if child is closed. If true, it reloads the page.
Demo: https://jsfiddle.net/gv6nmdn9/
EDIT When using method 1, make your parent to open the popup you want and just add this in your child:
Close Me
Detect it in parent page:
iframe=window.open("");
iframe.onclose=function(){
window.location="redirect";
};
I have to refresh my parent window once I am done with the changes in the popup window, for which I use :
<BODY onunload="opener.location.reload();">
But this closes my window on any event, like save, whereas I don't want to get it close. I want to close my window only by clicking window close or by clicking close button in my jsp with "Javascript".
For closing thru "Close" button.
JS :
function closeAndRefresh(){
opener.location.reload(true);
window.close();
}
Solved the problem
JS:
var myclose = false;
function ConfirmClose()
{
if (event.clientY < 0)
{
myclose=true;
}
}
function HandleOnClose()
{
if (myclose==true)
{
opener.location.href = "<%=request.getContextPath()%>parent_jsp_path";
window.close();
}
}
HTML:
<BODY onbeforeunload="ConfirmClose();" onunload="HandleOnClose();">
My client has a link on their website which opens a customer service chat window in a popup. They are seeing users clicking the chat link multiple times, which opens multiple chat sessions, and it is throwing off their stats. I need to disable the link when the chat window is opened, and restore it when the chat window has been closed. I can't modify/access child window.
The original link looks like this:
<a class="initChat" onclick="window.open('https://chatlinkhere.com','chatwindow','width=612,height=380,scrollbars=0'); return false;">
I figured the best thing to do would be to store the window.open() as a variable in a function:
function openChat() {
child = window.open('http://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0,menubar=0');
}
and change the link HTML to
<a class="initChat" onclick="openChat();">
Note: Ideally, I'd like to detect the original onclick's value, and store it in a variable. Something like:
jQuery('.initChat').find().attr('onclick');
But I'm not sure how to store it and then call it later.
Next I need to run a check to see if the chat window is open or not:
timer = setInterval(checkChild, 500);
function checkChild() {
if (child.open) {
alert("opened");
jQuery(".initChat").removeAttr("onclick");
jQuery(".initChat").css("opacity", ".5");
clearInterval(timer);
}
if (child.closed) {
alert("closed");
jQuery(".initChat").attr('onclick', 'openChat(); checkChild();');
jQuery(".initChat").css("opacity", "1.0");
clearInterval(timer);
}
}
Note: the alerts are just there for testing.
And add the new function to the link
<a class="initChat" onclick="openChat(); checkChild();">
And once the chat window is closed, I need to restore the onclick attribute to the link (is there an easier way to do this?)
Fiddle demo is here -> http://jsfiddle.net/JkthJ/
When I check Chrome Console I'm getting error
Uncaught TypeError: Cannot read property 'open' of undefined
UPDATE
Whoever left me the answer in http://jsfiddle.net/JkthJ/2/ thank you very much it works! :)
i think you need is open pop up if already open then foucus on pop up or noyhing should happen
you can rewrite your function as
var winPop = false;
function OpenWindow(url){
if(winPop && !winPop.closed){ //checks to see if window is open
winPop.focus(); // or nothing
}
else{
winPop = window.open(url,"winPop");
}
}
just do it in a simple way. disable the mouse events on anchor link after child window open.
css
.disableEvents{
pointer-events: none;
}
js
var childWindow;
$('a').on('click',function(){
childWindow = window.open('_blank',"height:200","width:500");
$(this).addClass('disableEvents');
});
if (typeof childWindow.attachEvent != "undefined") {
childWindow.attachEvent("onunload", enableEvents);
} else if (typeof childWindow.addEventListener != "undefined") {
childWindow.addEventListener("unload", enableEvents, false);
}
enableEvents = function(){
$('a').removeClass('disableEvents');
};
update
your child window is plain html page. Do the changes in child window html code:
<html>
<head>
<script>
function myFunction()
{
window.opener.enableEvents(); //it calls enableEvents function
}
</script>
</head>
<body onunload="myFunction()">
<!--your content-->
</body>
</html>
This is what I got to finally work:
<a class="initChat" onclick="checkWin()"></a>
<script>
var myWindow;
function openWin() {
myWindow = window.open('https://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0');
}
function checkWin() {
if (!myWindow) {
openWin();
} else {
if (myWindow.closed) {
openWin();
} else {
alert('Chat is already opened.');
myWindow.focus();
}
}
}
</script>