![](/img/trans.png)
[英]How to display customized fancybox when user presses F5 key or clicks browser's back / close button?
[英]Close Jquery dialog when the user presses browser's back button
我有這個問題,當使用按下瀏覽器的后退按鈕時,Jquery UI對話框不會關閉。 我環顧四周尋找答案,我發現了onhashchange事件,我無法使用,因為我打開的頁面在對話框打開時沒有發送httprequest,所以后退按鈕也不會發送新的請求。
任何人都可以幫我解釋為什么在對話框打開時它不發送httprequest? 如何關閉后退按鈕上的對話框?
謝謝
以下是我的JavaScript代碼。
// 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);
});
假設單擊popup-btn ,將顯示彈出面板 。
<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>
嘗試這個
<script language="javascript">
$(document).ready(function () {
$( window ).unload(function() {
//alert( "Bye now!" );
jQuery('#popup').dialog('close');
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.