jQuery 如何启用超链接以打开模态对话框，同时还允许在同一链接上的新选项卡中打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15413666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Enable a Hyper-link To Open a Modal Dialog whilst also allowing Open in New Tab on the same link
提问by fin
I am developing a webpage. On the webpage is a hyper-link, called "View Page". Once clicked, the aim is that this will display the linked-to-page in a modal dialog.
我正在开发一个网页。网页上有一个超链接，称为“查看页面”。单击后，目的是在模态对话框中显示链接到页面。
Here is the code that I use to achieve this:
这是我用来实现此目的的代码：
<!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>
Is there a way that functionality similar to that below can be implemented to allow the user to right click on the View Pagelink, select “Open in New Tab” or Open in New Windowand have SomeValidUrlopen in the new tab or new window? If the user Left Clicks SomeValidUrlthe page should open in the modal dialog.
有没有一种方式，与下图类似的功能，可以实现以允许用户在上点击右键查看页面的链接，选择“打开在新标签”或在新窗口中打开，并有SomeValidUrl在新标签页或新窗口中打开？如果用户左键单击SomeValidUrl，则页面应在模式对话框中打开。
回答by Sunyatasattva
There is really no problem with return false. Actually you should! If you don't return falseor preventDefaultyour modal will open and then the link will trigger, forwarding you to the other page.
真的没有问题return false。其实你应该！如果您不这样做，return false或者preventDefault您的模态将打开，然后链接将触发，将您转发到另一个页面。
If you want this to work just if the user right clicks his way through the link to open it in a new window/tab, it is sufficient for you to put SomeValidURL(that you have in the srcattribute of your iframe) for the hrefattribute of the aelement.
如果您希望这仅在用户通过链接右键单击以在新窗口/选项卡中打开它时才起作用，那么您将SomeValidURL（您在您的src属性中拥有的iframe）作为元素的href属性就足够了a.
Also, as a general tip, avoid binding events inline; rather use jQuery.on: it is more flexible, it sticks to the best practice of separation of concerns, and it really helps with clutter.
此外，作为一般提示，避免内联绑定事件；而是使用jQuery.on：它更灵活，它坚持关注点分离的最佳实践，它确实有助于解决混乱。
回答by Rick Calder
Add a class to the links then use this.
向链接添加一个类，然后使用它。
$(".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;
});
回答by Lightness Races in Orbit
Then allow the normal use of the link, with the hrefattribute:
然后允许正常使用链接，加上href属性：
<a href="SomeValidURL" onclick="javascript:OpenModal();">View Page</a>
Despite the return false, this should still work, since your clickhandler is not involved when right-clicking and selecting "open in new tab" from the resulting browser-rendered context menu.
尽管如此return false，这应该仍然有效，因为click右键单击并从生成的浏览器呈现的上下文菜单中选择“在新选项卡中打开”时不涉及您的处理程序。
