Question

有一个场景，我们需要在点击外部链接时显示外部链接免责声明。因此，我们有外部共享链接的无序列表。比如facebook，twitter和google等。当用户点击每个链接时，让用户点击facebook链接然后显示External Share Link免责声明对话框然后当用户点击模态对话框上的ok按钮时，在对话框中打开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>

Answer 1

嘿，将您的<script>区域替换为给定代码

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(".ExternalLink").click(function () {
link = $(this).attr('href');
 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>

window.open（）函数打开多个窗口

1 个答案: