admin管理员组

文章数量:1278820

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=".7.1/themes/base/jquery-ui.css">
        <script type="text/javascript" src=".3.2/jquery.min.js"></script>
        <script type="text/javascript" src=".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.

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./ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis./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.

  • javascript
  • jquery
  • html
  • web-applications
Share Improve this question edited Mar 19, 2013 at 0:24 Lightness Races in Orbit 385k77 gold badges666 silver badges1.1k bronze badges asked Mar 14, 2013 at 15:38 finfin 1,3034 gold badges19 silver badges34 bronze badges 2
  • I would remove the onclick and then use a normal click event, then detect what kind of click event it was (left, right or middle) and react accordingly. (Hint: you only want to open the modal on left click). Also would need to add the url to the href. – Kevin B Commented Mar 14, 2013 at 15:44
  • The reason why all you get is the main page opened in the tab, is because of your href="#". – Sunyatasattva Commented Mar 14, 2013 at 15:58
Add a ment  | 

3 Answers 3

Reset to default 2

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.

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.", '_blank');
                break;
            default :
                window.open("http://www.google.", '_blank');
                break;
        }
        return false;
    });

Demo: http://jsfiddle/calder12/Er7NN/

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.

本文标签：

版权声明：本文标题：javascript - How To Enable a Hyper-link To Open a Modal Dialog whilst also allowing Open in New Tab on the same link - Stack Ove 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741217772a2360383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。