关闭对话框的Jquery当用户presses浏览器的后退按钮 [英] Close Jquery dialog when the user presses browser's back button
本文介绍了关闭对话框的Jquery当用户presses浏览器的后退按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的问题，即当使用presses浏览器的后退按钮jQuery UI的对话框不会关闭。我环顾四周，一个答案，我发现onhashchange事件，我不能使用，因为我在页面不发送HTT prequest当对话框打开，以便后退按钮也不会派新无论是要求
谁能帮给我解释为什么它打开的对话框时，不发送HTT prequest？我怎么能收上后退按钮pressed对话框？
感谢
下面是我的JavaScript code。
//功能打开弹出窗口VM
功能openVMDialog（VMID）{
fetch.Ajax（vmDetailUrl + + VMID，beforeDialogSend，onDialogSuccess，onDialogError'VMID =？'）;
//不使用对pushState的不支持pushState的（IE小于10）浏览器，pjax可能无法正常无.support.pjax $检查
//但是IE导致pjax滚动到顶部。检查support.pjax这里prevent这种情况发生在IE浏览器。
如果（.support.pjax $）{
@ Model.AccountId.HasValue.ToString（）。ToLower将（）
？ window.history.pushState（NULL，NULL，indexUrl +＆放大器; VMID =+ VMID）
：window.history.pushState（？VMID =NULL，NULL，+ VMID）;
} };
功能beforeDialogSend（）{
$（＃弹出）HTML。（'＆LT; DIV CLASS =装载机＆GT;＆LT; IMG SRC =@ Links.Content.loader_gifALT =装载/＆GT;＆LT; /装载机＆GT;'）。对话框（开放）;
};
功能onDialogSuccess（数据）{
$（＃弹出）HTML（数据）.hide（）淡入（1000）.dialog（{位置：'中心'}）;
};
功能onDialogError（）{
$（＃弹出）HTML（'＆LT; p类=装载机＆GT;！嗯哦A＆LT; EM＆GT;服务器错误＆LT; / EM＆GT;发生＆LT; / P＆GT;'）。
}; 功能openDialogRestrictions（VMID）{
//禁用背景滚动时，对话框打开
如果（$（文件）.height（）＆GT; $（窗口）.height（））{
VAR scrollTop的=（$（'HTML'）。scrollTop的（））？ $（'HTML'）scrollTop的（）：$（'身体'）scrollTop的（）;
$（'HTML'）addClass（'disableScroll'）的CSS（'顶'， - scrollTop的）。
}
//点击任何地方关闭
jQuery的（'UI的小部件的覆盖'）。绑定（点击，函数（）{
jQuery的（'＃弹出）对话框（亲密）。
}）
setGifVisibility（活GIF，FALSE）;
}; 功能closeDialogRestrictions（）{
//启用后台滚动时，对话框接近
VAR scrollTop的= parseInt函数（$（'HTML'）的CSS（'顶'））;
$（'HTML'）removeClass移除（'disableScroll'）。
$（'HTML，身体'）scrollTop的（-scrollTop）。
如果（.support.pjax $）window.history.pushState（NULL，NULL，indexUrl）;
setGifVisibility（活GIF，真正的）;
}; $（文件）。就绪（函数（）{ //从滚动到顶部prevent pjax。
如果（.support.pjax）$ .pjax.defaults.scrollTo = FALSE; 为VM //设置对话框
$（＃弹出）。对话框（{
的AutoOpen：假的，
位置：中心，
宽度：450，
了maxHeight：600，
了minHeight：450，
可调整大小：假的，
拖动：假的，
closeOnEscape：真实，
模式：真实，
closeText：空，
显示：{大意是：夹子，工期：300}，
隐藏：{大意是：夹子，工期：300}，
dialogClass：固定对话框，
打开：openDialogRestrictions，
关闭：closeDialogRestrictions
}）; 自动调用setHeight（）;
loadContent（）; 如果（@ Model.VMId.HasValue.ToString（）ToLower将（）。）openVMDialog（@ Model.VMId）; //刷新页面每隔1分钟
的setInterval（loadContent，60000）;
}）;
解决方案
试试这个
假设上的弹出-BTN ，弹出面板将被显示。
的点击要采取操作
- 点击上打开弹出式面板链接。
红色弹出面板将显示 - 点击上的浏览器后退按钮即可。
红色弹出面板将会消失
\r
\r\r
\r＆LT;风格＆GT;\r
.popup面板\r
{\r
显示：无;\r
宽度：100像素;\r
高度：100像素;\r
背景：红色;\r
}\r
＆LT; /风格＆GT;\r
\r
＆LT;一类=弹出-BTN的风格=光标：指针;颜色：蓝色＆GT;打开弹出面板＆LT; / A＆GT;\r
\r
＆LT; DIV CLASS =弹出面板＆GT;＆LT; / DIV＆GT;\r
\r
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-2.1.4.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本＆GT;\r
\r
$（文件）。就绪（函数（）{\r
\r
$（弹出-BTN）。点击（函数（）{\r
的location.hash =弹出;\r
。$显示（弹出面板）（）;\r
}）;\r
\r
}）;\r
\r
$（窗口）.bind（'hashchange'，函数（）{\r
\r
如果（的location.hash == NULL ||的location.hash ==）{\r
$（弹出面板。），隐藏（）。\r
}\r
\r
}）;\r
\r
＆LT; / SCRIPT＆GT; \r
I have this problem where the Jquery UI dialog does not close when the use presses the browser's back button. I've looked around for an answer and I found onhashchange event which I'm unable to use because the page that I have doesn't send an httprequest when the dialog is open so back button wouldn't send a new request either.
Can anyone help explaining to me why it doesn't send an httprequest when the dialog is opened? And how can I close the dialog on back button pressed?
Thanks
Below is my JavaScript code.
// Functions to open VM popups
function openVMDialog(vmId) {
fetch.Ajax(vmDetailUrl + '?vmId=' + vmId, beforeDialogSend, onDialogSuccess, onDialogError);
// Not using pushState on browsers that don't support pushState (IE<10), pjax can fail gracefully without $.support.pjax check
// but IE causes pjax to scroll to top. Check support.pjax here to prevent that from happening on IE.
if ($.support.pjax) {
@Model.AccountId.HasValue.ToString().ToLower()
? window.history.pushState(null, null, indexUrl + "&vmId=" + vmId )
: window.history.pushState(null, null, "?vmId=" + vmId);
}
};
function beforeDialogSend() {
$("#popup").html('<div class="loader"><img src="@Links.Content.loader_gif" alt="loader" /></loader>').dialog('open');
};
function onDialogSuccess(data) {
$("#popup").html(data).hide().fadeIn(1000).dialog({position: 'center'});
};
function onDialogError() {
$("#popup").html('<p class="loader">Uh oh! A <em>Server Error</em> Occurred</p>');
};
function openDialogRestrictions(vmId) {
// Disable background scroll when dialog is open
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop();
$('html').addClass('disableScroll').css('top',-scrollTop);
}
//Click anywhere to close
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#popup').dialog('close');
})
setGifVisibility("live-gif", false);
};
function closeDialogRestrictions() {
// Enable background scroll when dialog is close
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('disableScroll');
$('html,body').scrollTop(-scrollTop);
if ($.support.pjax) window.history.pushState(null, null, indexUrl);
setGifVisibility("live-gif", true);
};
$(document).ready(function() {
// Prevent pjax from scrolling to top.
if ($.support.pjax) $.pjax.defaults.scrollTo = false;
// Dialog settings for VMs
$("#popup").dialog({
autoOpen: false,
position: 'center',
width: 450,
maxHeight: 600,
minHeight: 450,
resizable: false,
draggable: false,
closeOnEscape: true,
modal: true,
closeText: null,
show: { effect: "clip", duration: 300 },
hide: { effect: "clip", duration: 300 },
dialogClass: 'fixed-dialog',
open: openDialogRestrictions,
close: closeDialogRestrictions
});
setHeight();
loadContent();
if (@Model.VMId.HasValue.ToString().ToLower()) openVMDialog(@Model.VMId);
// Refreshes the page every 1 minute
setInterval(loadContent, 60000);
});
解决方案
try this
assuming on click of popup-btn, popup-panel will be shown.
Actions to be taken
- Click on Open Popup Panel link.
The red popup-panel will be shown - Click on browser back button.
The red popup-panel will be gone
<style>
.popup-panel
{
display:none;
width:100px;
height:100px;
background:red;
}
</style>
<a class="popup-btn" style="cursor:pointer;color:blue">Open Popup Panel</a>
<div class="popup-panel"></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$(".popup-btn").click(function () {
location.hash = "popup";
$(".popup-panel").show();
});
});
$(window).bind('hashchange', function () {
if (location.hash == null || location.hash == "") {
$(".popup-panel").hide();
}
});
</script>
这篇关于关闭对话框的Jquery当用户presses浏览器的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
