I want to close pop up on click of back button for mobile. I implemented this using onhashchange:
window.onhashchange = function (event) {
};
In this case, if pop up is opened multiple times then on click of back button, it opens and closes the modal pop up. But, I want modal pop up to close on first back and navigate to prev page on next back.
I also tried using onbeforeunload, but it will show another alert to leave or stay on the page.
$(window).bind('beforeunload', function(e) {
return false;
});
What is the best way to close the pop up on back button and redirect to prev page on next back?
if (window.history && window.history.pushState) {
$('#myModal').on('show.bs.modal', function (e) {
window.history.pushState('forward', null, './#modal');
});
$(window).on('popstate', function () {
$('#myModal').modal('hide');
});
}
bootply.com was down when I was testing my answer. See the inline script and comments at the bottom of the code below. The rest is just Twitter Bootstrap boilerplate so that I could easily test it locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>modal.html</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>If you press the back button now, you should return to whatever page you were on before this page.</p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show me the modal!</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>If you press the web browser's back button OR the modal's close buttons, the modal will close and the hash will return to "modal.html#modalClosed".</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Immutable hash state identifiers.
var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";
/* Updating the hash state creates a new entry
* in the web browser's history. The latest entry in the web browser's
* history is "modal.html#modalClosed". */
window.location.hash = closedModalHashStateId;
/* The latest entry in the web browser's history is now "modal.html#modalOpen".
* The entry before this is "modal.html#modalClosed". */
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = openModalHashStateId;
});
/* When the user closes the modal using the Twitter Bootstrap UI,
* we just return to the previous entry in the web
* browser's history, which is "modal.html#modalClosed". This is the same thing
* that happens when the user clicks the web browser's back button. */
$('#myModal').on('hide.bs.modal', function(e) {
window.history.back();
});
</script>
</body>
</html>
This is my solution for bootstrap modals. It adds support closing with back button to all bootstrap modals. You can adapt it for your non-bootstrap popups.
//Modal Closer With Back Button Support (Uses EventDelegation, so it works for ajax loaded content too.)
(function() {
var activeOpenedModalId = null;
var isHidingModalByPopState = false;
$(document).on('show.bs.modal', '.modal', function() {
activeOpenedModalId = $(this).attr('id');
window.location.hash = activeOpenedModalId;
}).on('hide.bs.modal', '.modal', function() {
if(!isHidingModalByPopState) {
window.history.back();
}
isHidingModalByPopState = false;
activeOpenedModalId = null;
});
$(window).on('popstate', function() {
if(activeOpenedModalId && window.location.hash !== '#'+activeOpenedModalId) {
isHidingModalByPopState = true;
$("#" + activeOpenedModalId).modal('hide');
}
});
})();
I write this code for my own website
and tested too many times with different devices and browsers
Chromium 71 , Chrome 67 , FireFox 65 , Android 4.1 , Android 4.2 , Android 7.1
window.onload=function(){
State=0;
$(".modal").on("show.bs.modal",function(){
path=window.location.pathname+window.location.search;
history.pushState("hide",null,path);
history.pushState("show",null,path);
State="show";
})
.on("hidden.bs.modal",function(){
if(!!State)
history.go(State=="hide"?-1:-2);
});
setTimeout(function(){// fix old webkit bug
window.onpopstate=function(e){
State=e.state;
if(e.state=="hide"){
$(".modal").modal("hide");
}
};
},999);
$("#myModal").modal("show");
};
dont use $(document).ready instead of window.onload
This could be done easily using Apache Cordova but not sure if you are using it to show your page in webview.
function onBackKeyDown(e) {
e.preventDefault();
}
document.addEventListener("backbutton", onBackKeyDown, false);
http://cordova.apache.org/docs/en/2.4.0/cordova_events_events.md.html#backbutton
according to http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = "modal";
});
$(window).on('hashchange', function (event) {
if(window.location.hash != "#modal") {
$('#myModal').modal('hide');
}
});
By clicking back, automatically $('.modal').hide() function get activated.
So no need to hide modal. We can see grey shaded background after back button.You can use either of these line of code to close modal pop up.
$('.modal' ).modal( 'hide' ).data( 'bs.modal', null ); [work on bootstrap 3]
Or
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Inspect the page when modal is active you can see these classes.
Do correct me if this method is wrong or other simple way exist.
Just add this code to script:
//update url to current url + #modal-open. example: https://your-url.test/home#modal-open
$('body').on('shown.bs.modal', '.modal', function () {
location.hash = '#modal-open'
})
//remove #modal-open from current url, so the url back to: https://yoururl.test/home
$('body').on('hidden.bs.modal', '.modal', function () {
location.hash = ''
})
//when user press back button
$(window).on('hashchange', function (e) {
if(location.hash == ''){
$('.modal').modal('hide')
}
})
and the above code works perfectly even though the modal is opened and closed several times.
*note:
jQuery 3.^
Bootstrap 4.^
My Solution in Angular
// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
window.history.pushState(ref.id, '');
// pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
ref.afterClosed().subscribe(() => {
if (history.state === ref.id) {
window.history.go(-1);
}
});
});
Issue : When a modal is open and the user clicks browser's back button, the page navigates (backwards or forward) but the modal remains open.
Solution :
In Javascript :
$(window).on('popstate', function() {
$('.modal').click();
});
In Angular :
ngAfterViewInit() {
$(window).on('popstate', function() {
$('.modal').click();
});}
I don't like hash. And this code without hash in url
onModalMounted() => {
if (isMobile) {
history.pushState('modalShow', "", path); // add history point
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
history.replaceState('', "", path);
window.onpopstate = () => {} // stop event listener window.onpopstate
}
} else {
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
window.onpopstate = () => {} // stop event listener window.onpopstate
}
}
}
I'll did it like this :
// 2.0 and above
#Override
public void onBackPressed(evt) {
evt.preventDefault();
closeTab();
}
// Before 2.0
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
evt.preventDefault();
closeTab();
return true;
}
return super.onKeyDown(keyCode, event);
}
--> These are handlers btw, need addEventListener =)
I've done it by memory, i'll check it later when i find it in my 'code mess' folder
Related
I'm new to javascript.
Below is my popup form code,
try to find a way to make popup form only show one time.
Looking for a solution.
Can someone help me?
Here is my form code:
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
</div>
<!-- Begin Pop-up Signup Form -->
<div id="mc_embed_signup">
<form action="# " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">
</div>
</form>
</div>
<!-- End Signup Form -->
</div>
I've included these in the header of the page:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
Then follows the message using a jQuery popup. Here it is:
<script>
$(document).ready(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(9800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(10000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose,.backgroundOverlay").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
</script>
You need to:
keep track of the fact you have shown the dialog to this user before
isolate the show function
use a cookie to persist the event of showing
can't guarantee it works 100% because i don't have the time now, but you can surely get started with this.
therefore I re-wrote the code above:
<script>
var didShowOnce = false;
var canShowDialog = function () {
// try to read cookie
var ckvalue = $.cookie('dialog-shown');
if (typeof ckvalue !== 'undefined' && ckvalue != null) {
didShowOnce = ckvalue == '1';
}
// write cookie to make sure it sticks
$.cookie('dialog-shown', didShowOnce ? '1' : '0', { expires: 365, path: '/' });
return !didShowOnce;
};
$(document).ready(function () {
ShowDialog();
});
var ShowDialog = function () {
if (canShowDialog()) {
$.cookie('dialog-shown', '1', { expires: 365, path: '/' });
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(9800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(10000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose,.backgroundOverlay").click(function (e)
{
HideDialog();
e.preventDefault();
});
}
}
var HideDialog = function () {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
</script>
I am tring to open a new popup url in chrome extension pop up on the onclick event of a button. In my case I have a page which will display two buttons on startup. This has been set in the useropt.html page
useropt.html
<script src="scripts/usmanager.js"></script>
<body>
<div id="btn_wrap_inner">
<button class="btn" id="signin">Sign In</button><br /><br />
<button class="btn" id="signup">Sign Up</button>
</div>
</body>
The JS file usnmanager.js has js code which has code to open a new popurl url in the popup window on the onlick event of the buttons above.
usnmanager.js
function btn_clicked(tgtUrl) {
if(tgtUrl == "signin") {
var manager_url = "signin.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
} else if(tgtUrl = "signup") {
var manager_url = "signup.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
}
}
document.addEventListener("click", function() {
document.querySelector('#signin').addEventListener('click', btn_clicked('signin'));
document.querySelector('#signup').addEventListener('click', btn_clicked('signup'));
});
But when I am clicking either of the button the popup window is not loading the new popup page as set. Please let me know what have I done wrong
I would not try to pass the string in the event handler but use an attribute of the clicked button
function btn_clicked() {
var id=this.id;
if(id == "signup") {
Also in you code you test signup twice and you only add the event handler when you click something. Instead you likely want
document.addEventListener("DOMContentLoaded", function() {
I've been using jQueryUI for a long time now but have recently made the switch to Bootstrap for aesthetic reasons. I am now struggling with what I would expect to be a simple issue and wondered if it's something that others more familiar with Bootstrap can help me with.
I have a generic function for creating dialogs on-the-fly and there are occasions where I show a dialog with no buttons (when processing something), and then swap it to a dialog that does have buttons (process complete - click OK, for example). I'm not trying to define a set process here so I'm basically saying I want to be able to close one dialog and open another whenever needed. This is where the problem comes in.
With Bootstrap the dialogs animate in and out, and I like that and want to keep it. I don't want to do it when swapping dialogs though. I can do this by removing the class fade from the first dialog when it shows, and from the second dialog before it shows, and that works great. I then add the class to the second dialog so that it will animate out. However, the animation goes wrong when I do this and there's an ugly flash where the background div should fade out gently.
I've put together a jsfiddle to demonstrate the issue. You can click the close button on the first dialog to see what the fade out animation should look like.
Any help would be appreciated before I start digging into the Bootstrap source files.
http://jsfiddle.net/ArchersFiddle/0302gLav/1/
tl;dr
Look at the jsfiddle - click "show dialog 2" - click "ok". I want to get rid of the black flash at the end.
CSS
#import url("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
.modal {
display: none;
}
HTML
<div id="dialog1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Dialog 1</h4>
</div>
<div class="modal-body">This is the first modal dialog</div>
<div class="modal-footer">
<button type="button" id="dialog-ok" class="btn btn-default">Show dialog 2</button>
<button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dialog2" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Dialog 2</h4>
</div>
<div class="modal-body">This is the second modal dialog</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
JavaScript
function showDialog2() {
$("#dialog1").removeClass("fade").modal("hide");
$("#dialog2").modal("show").addClass("fade");
}
$("#dialog1").modal("show");
$("#dialog-ok").on("click", function() {
showDialog2();
});
function showDialog2() {
$("#dialog1").removeClass("fade").modal("hide");
$("#dialog2").addClass("fade").modal("show");
}
you want to be this
UPDATED:
I added a click() handler for your last button with an added test identifier id="test" where the dialog and the background gets faded out with the fadeOut() effect. The important thing is to fade out the element .modal-backdrop which encapsules both the dialog and background:
$("#test").on("click", function () {
$(".modal-backdrop").fadeOut("slow");
});
JsFiddle
Okay, I don't like to answer my own question, but I've got a solution that is 100% foolproof (as far as I can tell). I've ended up going for a solution that checks for an existing dialog and modifies that, rather than hiding it and showing a new one.
Here's a working jsfiddle (using echo in the ajax call where it normally loads a html template)...
http://jsfiddle.net/ArchersFiddle/0302gLav/9/
The code is part of a larger library I'm working on, but I'll post it here anyway as it may well prove useful to others.
JavaScript Library
(function () {
var _defaultOptions = {
backdrop: "static",
close: true,
keyboard: true
};
window.bootstrap = {
modal: {
show: function (options) {
options = $.extend(_defaultOptions, options);
var buttonText = "";
for (var key in options.buttons) {
options.buttons[key].id = "button_" + key.split(" ").join("");
var button = options.buttons[key];
buttonText += "<button type=\"button\" " +
"id=\"" + button.id + "\" " +
"class=\"btn " +
(typeof (button.class) == "undefined" ? "btn-default" : button.class) + "\" " +
(typeof (button.dismiss) == "undefined" ? "" : "data-dismiss=\"modal\" ") + ">" +
key + "</button>";
}
$.ajax({
url: "templates/bootstrap-modal.html"
})
.done(function (data) {
data = data
.replace("{:Title}", options.title)
.replace("{:Body}", options.body)
.replace("{:Buttons}", buttonText);
var $modal = $("#bootstrap-modal");
var existing = $modal.length;
if (existing) {
$modal.html($(data).find(".modal-dialog"));
}
else {
$modal = $(data).appendTo("body");
}
for (var key in options.buttons) {
var button = options.buttons[key];
if (typeof (button.callback) !== undefined) {
$("#" + button.id).on("click", button.callback);
}
}
$modal.off("shown.bs.modal").on("shown.bs.modal", function(e) {
if (typeof(options.onshow) === "function") {
options.onshow(e);
}
});
if (!existing) {
$modal.modal(options);
}
if (options.large === true) {
$modal.find(".modal-dialog").addClass("modal-lg");
}
if (options.close === false) {
$modal.find("button.close").remove();
}
});
},
hide: function (callback) {
var $modal = $("#bootstrap-modal");
if (!$modal.length) return;
$modal.on("hidden.bs.modal", function(e) {
$modal.remove();
if (typeof(callback) === "function") {
callback(e);
}
});
$modal.modal("hide");
}
}
};
})();
Template HTML
<div id="bootstrap-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">{:Title}</h4>
</div>
<div class="modal-body">{:Body}</div>
<div class="modal-footer">
{:Buttons}
</div>
</div>
</div>
</div>
Example usage:
bootstrap.modal.show({
title: "Dialog Title",
body: "<p>This is the dialog body and can contain any old html rubbish.</p>",
buttons: {
Close: {
dismiss: true
}
}
});
Further options explained
bootstrap.modal.show({
backdrop: true, // show the backdrop
close: true, // show the close button
keyboard: true, // allow the keyboard to close the dialog
title: "Dialog Title",
body: "<p>This is the dialog body and can contain any old html rubbish.</p>",
buttons: {
Button1: {
class: "btn-primary", // any class you want to add to the button
dismiss: false, // does this button close the dialog?
callback: function() { // button click handler
// the button was clicked - do something here
}
},
Button2: {
// options as defined as above. You can have as many buttons as you want
}
},
onshow: function(e) {
// this will trigger when the dialog has completed the show animation
}
});
and
bootstrap.modal.hide(function(e) {
// this will trigger when the dialog has completed the hide animation
});
All the options in the show() method are optional, but obviously you'll want a title and a body.
I've code how to close an opened modal before opening another one.
$('[data-toggle="modal"]').on('click', function() { //On click a button which call a modal
if(($(".modal").data('bs.modal') || {}).isShown){ //If a modal is shown
var modal = $(".modal.in"); // Get the current element
$(modal).modal('hide'); // Hide the current modal
}
});
Hope that helped!
A bit late but might help somebody with the same problem.
Removing the fade class when showing the new modal is showing the backdrop without a fade class either.
For a clean transition, hiding the current modal and showing the new one without fade, but with fade out on closing:
// hide the existing modal, but without fade animation
$("#existing-modal").removeClass("fade").modal("hide");
// show the new modal without fade animation, but enable the fade animation for later
$("#new-modal").removeClass("fade").modal("show").addClass("fade");
// enable fade animation of the backdrop, that was removed for the new modal
$(".modal-backdrop.in").addClass("fade");
(with the most recent Bootstrap versions, use $(".modal-backdrop.show").addClass("fade")),
The example with the fix: http://jsfiddle.net/bvalentino/f82z1wex/2/
I am creating a Bootstrap 2.3.1 modal as follows:
myModal = $('<div/>', {
'class': 'modal hide',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).append(content);
// insert Modal into DOM...
$(jqElement).after(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});
// in response to button click...
myModal.modal('show');
On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of fade class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.
The failure appears to be within the modal('show') execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the in class to the modal. The show and shown events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.
Note This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.
Please also note that I cannot update to Bootstrap 3. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.
I've modified the code and appended to the body instead of the unknown jqElement specified in your example. I've also added some example place holder content. See the following JS Fiddle for a working example http://jsfiddle.net/kYVtf/5/
var id = 'test',
content = '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><select><option>TEST</option></select></p></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div>';
var myModal = $('<div/>', {
'class': 'modal hide fade',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).html(content);
// insert Modal into DOM...
$('body').append(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});
I found the following issues helped:
a) The 'shown' action of the modal checks for a display:block attribute and forces it to be set.
b) the close button (which needed to do validation) was set to a click event - changing this to a delegated event made it work reliably
c) both the cancel buttons were mapped to the modal-dismiss action.
myModal.on('show', function (event) {
self._debug("show modal");
// show add form - should be a modal
myModal.find('form')[0].reset();
myModal.find('.alerts').empty();
self._debug('show end');
return true;
});
myModal.on('shown', function () {
var $el = $('#myModal');
if ($el.css('display') == 'none') {
self._debug(" WARNING! modal css error");
}
self._debug("fix for bootstrap error");
$el.css('display', 'block');
myModal.find('select:first').focus();
self._debug('Shown modal');
return true;
});
myModal.on('hide', function () {
self._debug('Hide modal');
return true;
});
myModal.on('hidden', function () {
var $el = $('#myModal');
$el.css('display', 'none');
self._debug('Hidden modal');
return true;
});
This behaviour started happening for me after I added the following to prevent unhandled modal closure.
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
I fixed it by adding show: false to the modal options and making sure there was no hide class in <div class="modal fade"
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();