How To Enable a Hyper-link To Open a Modal Dialog whilst also allowing Open in New Tab on the same link
Question
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 Page link, select “Open in New Tab” or Open in New Window and have SomeValidUrl open in the new tab or new window? If the user Left Clicks SomeValidUrl the page should open in the modal dialog.
3 answers
solution1
2 2013-03-14 15:49:05
There is really no problem with return false . Actually you should! If you don't return false or preventDefault your modal will open and then the link will trigger, forwarding you to the other page.
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 src attribute of your iframe ) for the href attribute of the a element.
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.
solution2
1 2013-03-14 16:02:42
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;
});
solution3
0 2013-03-14 17:16:15
Then allow the normal use of the link, with the href attribute:
<a href="SomeValidURL" onclick="javascript:OpenModal();">View Page</a>
Despite the return false , this should still work, since your click handler is not involved when right-clicking and selecting "open in new tab" from the resulting browser-rendered context menu.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.