如何启用超链接打开模态对话框，同时也允许在同一链接上的新选项卡中打开

How To Enable a Hyper-link To Open a Modal Dialog whilst also allowing Open in New Tab on the same link

本文关键字：链接 新选项 选项 超链接 启用 何启用 模态 对话框      更新时间：2023-09-26

我正在开发一个网页。网页上有一个超链接，叫做"查看页面"。一旦单击，目标是在模态对话框中显示链接到的页面。

下面是我用来实现这一点的代码: 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Test</title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
        <script>
           function OpenModal() {
                $("#divModal").dialog({
                    autoOpen: false, modal: true, title: 'Modal', width: 'auto', height: 'auto'
                    , buttons: { "Cancel": function () { $(this).dialog("close"); } },
                }).dialog('open');
                return false;
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="javascript:OpenModal();">View Page</a>
        <div style="display:none;" id="divModal">
            <iframe id="myIframe" src="SomeValidURL" width="1100" height="800" />
        </div>
    </body>
</html>

是否有一种类似于下面的功能可以实现，以允许用户右键单击查看页面链接，选择"在新选项卡中打开"或在新窗中打开，并有SomeValidUrl在新选项卡或新窗中打开?如果用户左击 someevalidurl ，页面应该在模态对话框中打开。

return false确实没有问题。其实你应该这么做!如果你没有return false或preventDefault，你的模式将打开，然后链接将触发，转发到另一个页面。

如果你想让它工作，只是如果用户右击他的方式通过链接打开它在一个新的窗口/选项卡，这足以让你把SomeValidURL(你在iframe的src属性)为a元素的href属性。

另外，作为一般提示，避免内联绑定事件;不如使用jQuery.on:它更灵活，它坚持关注点分离的最佳实践，并且它确实有助于解决混乱。

为链接添加一个类，然后使用这个。

  $(".link").mousedown(function(event) {
        switch (event.which) {
            case 1:
                //modal code
                break;
            case 3:
                window.open("http://www.google.com", '_blank');
                break;
            default :
                window.open("http://www.google.com", '_blank');
                break;
        }
        return false;
    });

演示:http://jsfiddle.net/calder12/Er7NN/

然后允许正常使用链接，使用href属性:

<a href="SomeValidURL" onclick="javascript:OpenModal();">View Page</a>

尽管return false，这应该仍然工作，因为你的click处理程序不涉及右键单击并选择"在新选项卡中打开"从结果浏览器呈现的上下文菜单。

相关文章：