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

38,536

Solution 1

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.

Solution 2

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;
    });

Demo: http://jsfiddle.net/calder12/Er7NN/

38,536

fin

Updated on March 19, 2020

Comments

fin about 4 years

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.

Sunyatasattva about 11 years

Ahah thank you, I was quite enjoying the 999 reputation: funny coincidence.
Lightness Races in Orbit about 11 years

Click on any post score! You'll be amazed.
Sunyatasattva about 11 years

Ah! Indeed no fancy notification introduced me to the privileges of the 1-thousand-s. Thanks :)