当 jQuery 对话框打开时,我不希望用户与后台交互
When the jQuery dialog is on I do not want the user to interact with the background
如果用户单击外部 link,jQuery UI 对话框会出现 "ok" 和 "cancel" 按钮,当他们单击 "ok" 它应该将他们带到外部站点。
一切都按预期工作,但问题出在 modal:true;
当对话框打开时,用户可以在后台工作,而我希望在弹出窗口打开时背景变灰.
$(window).on('load', function(){
$.expr[":"].external = function(a) {
var linkhn = a.hostname.split('.').reverse();
var linkHref = linkhn[1] + "." + linkhn[0];
var domainhn = window.location.hostname.split('.').reverse();
var domainHref = domainhn[1] + "." + domainhn[0];
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
};
$("a:external").addClass("ext_link");
});
$(document).ready(function(){
jQuery(document).on("click", ".ext_link", function () {
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id','dialog-confirm').css('display','none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
modal: false,
buttons: {
"Ok": function() {
window.open( link_val.href); $(this).dialog("close"); $(this).dialog('destroy').remove();
},
Cancel: function () {jQuery(this).dialog("close"); $(this).dialog('destroy').remove() ;}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});
你可以使用另一个div打开并覆盖整个页面,下面的代码就是这样写的。
为了不打扰您的大部分代码,我添加了 <div>
,它将在页面加载时隐藏。此 <div>
将在弹出窗口打开时显示,而相同的 <div>
将在对话框关闭时隐藏。
$(document).ready(function() {
jQuery(document).on("click", ".ext_link", function() {
$('#scrLoader').show();
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
buttons: {
"Ok": function() {
window.open(link_val.href);
$(this).dialog("close");
$(this).dialog('destroy').remove();
},
Cancel: function() {
$('#scrLoader').hide();
jQuery(this).dialog("close");
$(this).dialog('destroy').remove();
}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});
#scrLoader {
background-color: #333;
opacity: 0.8;
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('your path to a loader gif');
background-position: center;
background-repeat: no-repeat;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<input type="button" class="ext_link" value="click me" />
<div id="scrLoader" style="display: none;" hidden="true"></div>
您还可以使用 GIF,例如加载器 GIF,当特定 div 打开时会显示该 GIF,以便用户了解某些进程正在进行。
希望这对您有所帮助。
如果用户单击外部 link,jQuery UI 对话框会出现 "ok" 和 "cancel" 按钮,当他们单击 "ok" 它应该将他们带到外部站点。
一切都按预期工作,但问题出在 modal:true;
当对话框打开时,用户可以在后台工作,而我希望在弹出窗口打开时背景变灰.
$(window).on('load', function(){
$.expr[":"].external = function(a) {
var linkhn = a.hostname.split('.').reverse();
var linkHref = linkhn[1] + "." + linkhn[0];
var domainhn = window.location.hostname.split('.').reverse();
var domainHref = domainhn[1] + "." + domainhn[0];
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
};
$("a:external").addClass("ext_link");
});
$(document).ready(function(){
jQuery(document).on("click", ".ext_link", function () {
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id','dialog-confirm').css('display','none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
modal: false,
buttons: {
"Ok": function() {
window.open( link_val.href); $(this).dialog("close"); $(this).dialog('destroy').remove();
},
Cancel: function () {jQuery(this).dialog("close"); $(this).dialog('destroy').remove() ;}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});
你可以使用另一个div打开并覆盖整个页面,下面的代码就是这样写的。
为了不打扰您的大部分代码,我添加了 <div>
,它将在页面加载时隐藏。此 <div>
将在弹出窗口打开时显示,而相同的 <div>
将在对话框关闭时隐藏。
$(document).ready(function() {
jQuery(document).on("click", ".ext_link", function() {
$('#scrLoader').show();
$("<div>Thank you for visiting You are now being taken to an external site. </div>").dialog().attr('id', 'dialog-confirm').css('display', 'none');
var link_val = this;
$('#dialog-confirm').dialog({
title: "External Link",
height: "auto",
width: 410,
resizable: false,
buttons: {
"Ok": function() {
window.open(link_val.href);
$(this).dialog("close");
$(this).dialog('destroy').remove();
},
Cancel: function() {
$('#scrLoader').hide();
jQuery(this).dialog("close");
$(this).dialog('destroy').remove();
}
}
}).dialog("widget").find(".ui-dialog-titlebar").hide();
return false;
});
});
#scrLoader {
background-color: #333;
opacity: 0.8;
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('your path to a loader gif');
background-position: center;
background-repeat: no-repeat;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<input type="button" class="ext_link" value="click me" />
<div id="scrLoader" style="display: none;" hidden="true"></div>
您还可以使用 GIF,例如加载器 GIF,当特定 div 打开时会显示该 GIF,以便用户了解某些进程正在进行。
希望这对您有所帮助。