我正在创建一个弹出窗口，当用户单击外部链接时将显示该弹出窗口。用户可以选择通过单击按钮“确定”继续。否则，如果用户单击“取消”，则该用户停留在页面上。
我能够检测到用户何时单击外部链接，并使模式看起来正常。
我在线上找到了有关如何使用Jquery创建模态实例的教程。在大多数情况下，我能够根据自己的喜好调整模式（尽管存在一些对齐问题）。
我遇到的问题是如何获取在Jquery中创建的模式实例上单击的定位标记的URL。
我认为一种可行的方法是在Modal实例之外创建按钮，并在我在click函数中调用Modal进行打开时使这些按钮出现（下面显示了我将变量设置为要打开的modal的位置）单击锚标签时），这也解决了我前面提到的对齐问题。
var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
<h4 class='modal-title'>You are Now Leaving Our Site</h4>
<button id='closex' style='margin:5px' type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>x</span></button></div>
<div class='modal-body'>"
+ "<p>You are now exiting the Regal Medical Group, Inc. (RMG) web site. When you exit this site to access a different non-RMG web site, you become subject to the other web site’s privacy policy and practices. To learn about the other web site’s policy and practices, refer to the privacy policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue<br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'><button id='redirect' class='ok' href='#'>Ok</button><button id='close' class='cancel' href='#'>Cancel</button></div></div></div>"});
然后我想我可以创建函数来检查单击了哪些按钮。如果单击“确定”按钮，则捕获URL，清除覆盖层，清除模式（原因是网站上正在工作的某些链接的锚标记中包含“ target =“ _ blank”），然后将用户重定向到否则，如果为“取消”，请清除叠加层，清除模式，并保留在同一页面。
但是，这种方法不起作用。
我的问题：如何让这些按钮在Modal实例内部工作？
以下是所有锚定标记的点击功能（其中变量“ m”是模态）：
$( document ).ready(function() {
$('a').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href'),
host = location.host;
console.log("URL: " + url + " HOST: " + host);
if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
/* If we find the host name within the URL,
OR if we do not find http or https,
meaning it is a relative internal link
*/
window.location.href = url;
} else {
var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
<h4 class='modal-title'>You are Now Leaving Our Site</h4>
<button id='closex' style='margin:5px' type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>x</span></button></div>
<div class='modal-body'>"
+ "<p>You are now exiting the Regal Medical Group, Inc. (RMG) web site. When you exit this site to access a different non-RMG web site, you become subject to the other web site’s privacy policy and practices. To learn about the other web site’s policy and practices, refer to the privacy policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue<br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'><button id='redirect' class='ok' href='#'>Ok</button><button id='close' class='cancel' href='#'>Cancel</button></div></div></div>"});
if(m == true) {
return m;
}
}
});
});
，以下代码是模式的实例：
/*Pop-Up Modal Set UP
========================================*/
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content;/*,
$close,
$cancel,
$ok;*/
// Center the modal in the viewport
method.center = function () {
var top;
var left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.empty().append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Generate the HTML and add it to the Modal document
$overlay = $('<div class="overlay" style="display: none;"></div>');
$modal = $('<div class="modal id="myModal"></div>');
$content = $('<div class="modal-dialog">');
$modal.hide();
$overlay.hide();
$modal.append($content);
$(document).ready(function(){
//Add the Overlay and Modal
$('body').append($overlay, $modal);
});
return method;
}());
答案 0 :(得分：0)
<br><br><input type="submit" name="q1" value="arroz">
<input type="submit" name="q1" value="massa"><br><br>
<input type="submit" name="q1" value="Apanhado em flagrante">
<input type="submit" name="q1" value="batata de tremoços"><br><br><br>
<div id="lose"></div>
<div id="nextQuestion"></div> 要回答：
存储URL并在以后使用
e.preventDefault();答案 1 :(得分：0)
这里有一个完整的示例，说明了我所需要的。您会注意到，我并不是每次都重新创建对话框，只是在不需要时将其隐藏。您可能还会注意到async / await和数组符号语法。如果您需要与旧版浏览器兼容，则可以轻松转录或编译它们，但我希望您能以这种方式更好地理解它。
confirm = (url) => {
return new Promise((resolve, reject) => {
let yes = $('#overlay button#yes')
let no = $('#overlay button#no')
off = (then) => {
yes.off()
no.off()
$('#overlay').addClass('hidden')
then()
}
yes.one('click', () => {off(resolve)})
no.one('click', () => {off(reject)})
$('#overlay #link').text(url)
$('#overlay').removeClass('hidden')
})
}
jump = (url, target) => {
if(!target || target == '_self') {
window.location.href = url;
} else {
window.open(url, target)
}
}
handle = async(e) => {
e.preventDefault()
link = e.currentTarget
let url = $(link).attr('href')
let target = $(link).attr('target')
let host = location.host
if ((host && url.indexOf(host) > -1) || !/^https?:/.test(url)){ // relative link
jump(url, target)
} else {
try {
await confirm(url)
jump(url, target)
} catch(e) {/*nope*/}
}
}
attach = () => {
$('#content').on('click','a', handle)
}
$(attach)#overlay {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.5);
display: flex;
}
#confirm-dialog {
position: relative;
width: 50%;
min-height: 7em;
background-color: white;
border: 1px solid black;
border-radius: .5em;
margin: auto auto;
}
#confirm-dialog h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 1.5rem;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.7rem;
text-align: center;
}
#footer {
position: absolute;
height: 3em;
bottom: 0;
width: 100%;
justify-content: flex-end;
display: flex;
border-top: 1px solid gray;
}
#link {
margin-bottom: 3em;
padding: .5em;
text-align: center;
font-size: 1.5em;
}
#footer button {
width: 10em;
margin: .2em 1em;
}
.hidden {
display: none !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay" class="hidden">
<div id="confirm-dialog">
<h1>Do you want to navigate to:</h1>
<div id="link"></div>
<div id="footer">
<button id="yes">Yes</button>
<button id="no">No</button>
</div>
</div>
</div>
<div id="content">
This is an <a href="/apple">internal link</a> while this one is <a href="http://www.google.com" target="_blank">external</a> like <a href="http://codeproject.com">this</a> too.
</div>
PS：window.open在这里不起作用，因为它运行沙箱。
答案 2 :(得分：0)
我要感谢所有帮助我提出问题的人。当弹出窗口出现在屏幕上时，我可以通过将href传递到ok按钮来确定。在“按”按钮中，我在href中传递以下值：e.currentTarget.href。一旦我添加了它，它就像是一种魅力。
以下是完整的代码，如果其他人想使用它：
$( document ).ready(function() {
$('a').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href'),
host = location.host;
if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
/* If we find the host name within the URL,
OR if we do not find http or https,
meaning it is a relative internal link
*/
window.location.href = url;
} else {
var m = modal.open({content: "<div class='modal-content'><div class='modal-header'>
<h4 class='modal-title'>You are Now Leaving Our Site.</h4>
<button id='closex' style='margin:8px' type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>x</span></button></div><div class='modal-body'>"
+ "<p>You are now exiting the NameOfSite web site. When you exit this
site to access a different non-NameOfSite web site, you become subject to the other web site’s privacy
policy and practices. To learn about the other web site’s policy and practices, refer to the privacy
policy statement posted on the web site’s home page.<br /><br />Press Ok to Continue
<br />Press Cancel to Abort</p>" + "<br />" + "<div class='modal-footer'>
<a id='redirect' class='btn btn-primary' href='" + e.currentTarget.href + "' target='_blank'>Ok</a>
<button id='close' class='btn btn-default' href='#'>Cancel</button></div></div></div>"});
if(m == true) {
return m;
}
}
});
});