【发布时间】：2014-09-28 23:53:28
【问题描述】：
有一个场景，我们需要在点击外部链接时显示外部链接免责声明。因此，我们有外部共享链接的无序列表。像 facebook、twitter 和 google 等。当用户单击每个链接时，假设用户单击了 facebook 链接，然后显示外部共享链接免责声明对话框，然后当用户单击模态对话框上的确定按钮时，facebook 共享屏幕在对话框中打开，免责声明对话框是关闭/隐藏。
现在的问题是，当用户单击另一个链接时，可以说用户单击 Twitter，然后显示免责声明，但是当用户单击免责声明对话框上的确定按钮时，会打开两个弹出窗口，即先前显示的窗口和新的链接窗口。不知道如何防止这种行为，而不是打开两个窗口，它应该只打开当前点击的链接窗口。
任何人都可以有理由并解决此行为。
这里是代码
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="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>
<ul id="sharelink">
<li><a class="ExternalLink" data-toggle="modal" data-type="Facebook" data-target="#myExternalLinkModal" href="http://www.facebook.com">Facebook</a></li>
<li><a class="ExternalLink" data-toggle="modal" data-type="twitter" data-target="#myExternalLinkModal" href="http://www.google.com">Google</a></li>
<li><a class="ExternalLink" data-toggle="modal" data-type="google" data-target="#myExternalLinkModal" href="http://www.twitter.com">Twitter</a></li>
<li><a class="ExternalLink" data-toggle="modal" data-type="msdn" data-target="#myExternalLinkModal" href="http://msdn.microsoft.com">MSDN</a></li>
</ul>
<div class="modal fade bodytext" id="myExternalLinkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" style="background-color: white;">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-2 col-md-offset-10 col-sm-2 col-sm-offset-10">
<a class="modalRoundedCloseBtn" data-dismiss="modal"><span aria-hidden="true"></span></a>
</div>
</div>
</div>
<div class="modal-body text-center">
<div>
Clicking on this link means that you have choose to leave our website. While we believe that the website you have selected to visit may be of interest to you,
it is an an independent website which is not under out control. As a result, we do not endorse
its content and we have no responsibility for its content or privacy practices.<br />
<br />
If you do not wish to leave this site, click Cancel. Or, click OK to continue.
</div>
<br />
<br />
<div>
<a class="btn-xyz" data-dismiss="modal">Cancel</a>
<a id="extLinkOkBtn" class="btn-xyz" href="#">OK</a>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".ExternalLink").click(function () {
var link = $(this).attr('href');
var sharetype = $(this).attr('data-type');
//var sharetype = $(this).attr('data-type');
//var prevWind = Object;
$("#extLinkOkBtn").on("click", function () {
//var prevWindow= window.open(link, sharetype, 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no', true);
//prevWindow.close();
window.open(link, sharetype, 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no', true);
$("#myExternalLinkModal").modal('hide');
});
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery