Close popup window - javascript

I have a popup window which is opened using this code:
function _openpageview(fieldid,objectid,opennew)
{
var url='/s_viewpagefield.jsp?fieldid='+fieldid+'&codedid='+objectid;
web_window = window.open(url,'_blank', 'menubar=yes,location=no,scrollbars=yes,width=800,height=600,status=no,resizable=yes,top=0,left=0,dependent=yes,alwaysRaised=yes');
web_window.opener = window;
web_window.focus();
}
How can I close that popup from within the popup?
window.close();
self.close();
web_window.close();
all did not work

An old tip...
var daddy = window.self;
daddy.opener = window.self;
daddy.close();

You can only close a window using javascript that was opened using javascript, i.e. when the window was opened using :
window.open
then
window.close
will work. Or else not.

For such a seemingly simple thing this can be a royal pain in the butt! I found a solution that works beautifully (class="video-close" is obviously particular to this button and optional)
Close this window

Your web_window variable must have gone out of scope when you tried to close the window. Add this line into your _openpageview function to test:
setTimeout(function(){web_window.close();},1000);

in my case (joomla opened popup) I had to use this:
onclick="submit(); window.parent.location.reload(false);window.parent.SqueezeBox.close();"
Hope this may help

In my case, I just needed to close my pop-up and redirect the user to his profile page when he clicks "ok" after reading some message
I tried with a few hacks, including setTimeout + self.close(), but with IE, this was closing the whole tab...
Solution :
I replaced my link with a simple submit button.
<button type="submit" onclick="window.location.href='profile.html';">buttonText</button>.
Nothing more.
This may sound stupid, but I didn't think to such a simple solution, since my pop-up did not have any form.
I hope it will help some front-end noobs like me !

try this solution
<html>
<script>
var newWindow;
function openWindow() {
newWindow = window.open("", "myWindow", "width=200,height=100");
newWindow.document.write('Close this window');
}
function closeWindow() {
newWindow.close();
}
</script>
<h3 style="color:brown"> Close Window Example </h3>
<body>
<button onclick="openWindow()">Open New Window</button>
<br><br>
<button onclick="closeWindow()">Close New Window </button>
</body>
</html>

Close a popup after print.
In the parent windows
let IframeLink = '../Sale/PriceKOT?SalesID=#(Model.SalesInfo.SalesID)&PrintTypeID=3';
var newwindow = window.open(IframeLink, "KOT Print", 'width=560,height=550,toolbar=0,menubar=0,location=0');
if (window.focus) { newwindow.focus() }
function closeThisPopUp() {
newwindow.close();
printf();
}
In the child or popup window
window.onafterprint = function (event) {
opener.closeThisPopUp();
window.close;
};

using window.close()
javascript:window.close()
Try This:
<html>
<header>
<script>
let newWebWindow;
function openPageView() {
newWebWindow = window.open("", "window", "width=200,height=100");
newWebWindow.document.write(`Close this window`);
}
function closePageView() {
newWebWindow.close();
}
</script>
</header>
<body>
<h3 style="color:brown"> Close Window Example </h3>
<button onclick="openPageView()">Open Page</button>
<button onclick="closePageView()">Close Page</button>
</body>
</html>

Related

I want to open a popup window on a click and insert a button in the new window to allow closing by user

I want to open a popup window from a home page us an on click button, then in that popup, I want to place an onclick button t close the popup. I have the pop open working but can't figure out how to do the rest. Here is my code:
I have the open popup working from a button in the parent window. I need the close window button in the popup window.
<button onclick="openWin()">Open "myWindow"</button>
<button id="myBtn">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=400, height=200");
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.document.getElementByID("myBtn").onclick = closeWin;
}
function closeWin() {
myWindow.close();
}
</script>
Both buttons work but both are in the parent window. Need the win.close button to be placed in the popup window.
wnd.document.write("<button id='myBtn'>Close Window</button>");
wnd.document.getElementById("myBtn").onclick =
function() {
wnd.close();
};
return false;
};

In JavaScript, 'onbeforeunload' not working until we clicked on opened window

In JavaScript, 'onbeforeunload' not working until we clicked on opened window.
Please suggest me any solution.
Thanks in advance
Based on your comment, I don't think you're using it correctly. You need to return a string, not use an alert.
Parent page:
<script>
var w;
function x(){
w = window.open('test2.html');
}
</script>
<button onclick="x();">open</button>
<button onclick="w.close();">close</button>
Popup:
<html>
<head>
<script>
window.onbeforeunload=function (e) {
e.returnValue = "Are you sure you want to leave this page?";
return e.returnValue;
}
</script>
</head>
<body>
popup
</body>
</html>

Open window behind the parent window JS or PHP

I'm needing open a window behind parent window, and I'm not finding anything to do that.
Could someone help me with this code or tips?
Parent.php
<script type="text/javascript">
$(document).ready(function () {
window.name = "parent";
$('#link').click(function (event){
event.preventDefault();
window.open('child.php', 'fullscreen=yes', 'scrollbars=auto');
});
});
</script>
<body>
<a id="link" href="/">Open Window </a>
</body>
child.php
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
$('#link').click(function(event){
event.preventDefault();
console.log(window.opener.location);
var goBack = window.open('', 'parent');
goBack.focus();
});
});//]]>
</script>
<body>
<a id="link" href="#">Return to Parent </a>
</body>
LINK CODE: http://pontodosjogos.com/testegrana.php
You can use this code to display a pop-under window:
<script>
//specify page to pop-under
var popunder="http://yahoo.com";
//specify popunder window features
//set 1 to enable a particular feature, 0 to disable
var winfeatures="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0";
function loadpopunder()
{
win2=window.open(popunder,"",winfeatures);
win2.blur();
window.focus();
}
loadpopunder();
</script>
Source: http://www.javascriptkit.com/script/script2/popunder.shtml
Keep in mind that browsers will likely block the pop-under window and it is generally annoying seeing those from a user's perspective so try to not overdo those.

Iframe child sending data to parent and clearingtimeout

Hi Teams from all around,
I am most stumped on this issue.
I am attempting to use color box to create a pop up of a url through an iframe. (please not that the creative and source I have are the test pages, not actual subject). I am looking to have the iframe close after 12 seconds unless someone click within the iframe on the images within.
Basically it is a floater that will be for things such as group newsletters. I want to be able to just switch out the source page and have it available when the page first loads.
So, the page loads, starts the iframe floater, closes after (x) seconds unless someone clicks anywhere on the iframe, at that point they have to hit the close button.
I have been working on this for 2 days, and I either have it where the floater does not close at all or the floater refuses to stay open.
Please help.
And Much thanks in advance.
Preview Page:
http://matthewsallansdesign.com/Scripps/TestPageSETUP.html
Code on Parent Page:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
Var t;
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
</script><script>
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 12000);
});
</script><script>
$(".iframe").click(function(){
alert("click");
clearTimeout(t);
};
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Code on Child Page:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage('alert','moooo');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png" />
Thanks,
I actually was semi close before.
Here is how I did it. I am leaving this here for future people to learn from and have a very easy time.
Allowing the future web developers to learn.
Parent:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
var t;
var iframeHost = "http://matthewsallansdesign.com"
if(typeof window.postMessage != 'undefined'){
var iframeListener = function (event) {
console.log(event);
if(iframeHost == event.origin){
clearTimeout(t);
}
}
if (window.addEventListener) {
addEventListener("message", iframeListener, false);
}
else {
attachEvent("onmessage", iframeListener);
}
}
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 6000);
});
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Child:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage("HAMPSTERS",'*');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png">
The only thing anyone needs to actually do with this is replace the urls above.
I recommend everyone download the js and css on their own servers.
I will leave it up so others can find it.
Thanks,
Matthew

how to close popup window from asp.net mvc

I want to close some html popup windows. I have static site, which creates popup windows. These windows have a submit button, which sends a POST request to asp mvc app. This app works well and return View() (Index page with message "Ok". And Button "Close").
When I click on Close button- nothing happens.
My code:
<body>
<button type="button" id="btn" onclick="window.parent.jQuery('#btn, #m_window').hide('slow');">Close</button>
<!-- <button type="button" id="btnFoo" onclick="$("#btnFoo, #m_frame").live("click", function(){
$("#mistake").remove();
}); ">Close form </button>
-->
</body>
m_frame- frame of popup window.
mistake- div of popup window.
Please, tell me how to close this popup window?
window.close() doesn't work.
P.S. at js script (when popup creates) I write:
$("#btn",#m_window").live("click",function(){
var p = parent;
var win = p.document.getElementById('mistake');
win.parentNode.removeChild(win);
});
But it doesn't works too.
Try this
<script>
$(document).ready(function () {
$("#displayinmodal").dialog({
autoOpen: true,
modal: true,
buttons: {
"Close": function () {
$("#displayinmodal").dialog("close");
}
}
});
});
</script>
<div id="displayinmodal">
Popup demo
</div>
You should try:
window.close();

Categories