Question

我正在开发一个网页。在网页上是一个超级链接，称为“查看页面”。点击后，目标是在模式对话框中显示链接到页面。

以下是我用来实现此目的的代码：

<!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 ？如果用户左键单击 SomeValidUrl 页面应在模态对话框中打开。

Answer 1

return false确实没问题。其实你应该！如果您没有return false或preventDefault您的模态将会打开，然后该链接将会触发，转发您到另一页。

如果你希望这个工作正常，只要用户右键单击链接以在新窗口/标签中打开它，就可以放置SomeValidURL（你在{{{ 1 {} src}的属性，用于iframe元素的href属性。

另外，作为一般提示，避免内联绑定事件;而是使用jQuery.on：它更灵活，它坚持分离关注点的最佳实践，它确实有助于克服。

Answer 2

在链接中添加一个类然后使用它。

  $(".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/

Answer 3

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

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

尽管有return false，但仍然可以使用，因为右键单击并从生成的浏览器呈现的上下文菜单中选择“在新选项卡中打开”时，不会涉及click处理程序。

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

3 个答案: