Comment Permettre À un Hyper-lien Pour Ouvrir une boîte de Dialogue Modale, tout en permettant également Ouvrir dans un Nouvel Onglet sur le même lien

Je suis en train de créer un site. Sur le site est un hyper-lien, appelé "Afficher la Page". Une fois cliqué, le but est que cela permet d'afficher le lié-de-page dans une boîte de dialogue modale.

Voici le code que j'utilise pour réaliser ceci:

<!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>

Est-il possible que des fonctionnalités similaires à celle ci-dessous peuvent être mises en œuvre pour permettre à l'utilisateur de faire un clic droit sur le Afficher la Page lien, sélectionnez “Ouvrir dans un Nouvel Onglet” ou Ouvrir dans une Nouvelle Fenêtre et ont SomeValidUrl ouvrir dans un nouvel onglet ou une nouvelle fenêtre? Si l'utilisateur Clique Gauche SomeValidUrl la page devrait s'ouvrir dans la boîte de dialogue modale.

Je voudrais supprimer le onclick et ensuite utiliser un normal, cliquez sur l'événement, puis de détecter ce genre d'événement click il était (à gauche, à droite ou au milieu) et de réagir en conséquence. (Astuce: vous ne voulez ouvrir le modal sur la gauche de la souris). Aussi serait nécessaire d'ajouter l'url pour le href.
La raison pour laquelle tout ce que vous obtenez est la principale page qui s'ouvre dans l'onglet, c'est parce que de votre href="#".

OriginalL'auteur fin | 2013-03-14

  1. 2

    Il n'y a vraiment pas de problème avec return false. En fait, vous devriez! Si vous n'avez pas return false ou preventDefault votre modale s'ouvre et puis le lien va déclencher, transmettre à l'autre page.

    Si vous voulez que cela fonctionne seulement si l'utilisateur clique-droite sur son chemin à travers le lien pour l'ouvrir dans une nouvelle fenêtre/onglet, il suffit pour vous de mettre SomeValidURL (que vous avez dans le src attribut de votre iframe) pour la href attribut de la a élément.

    Aussi, un conseil, éviter les événements de liaison inline; utilisez plutôt jQuery.on: il est plus souple, qu'il colle au mieux à la pratique de la séparation des préoccupations, et il aide vraiment avec l'image de fond.

    +1: Corriger. Bienvenue à 1k!
    Ahah merci, j'ai été tout en profitant de la 999 réputation: drôle de coïncidence.
    Cliquez sur n'importe quel poste score! Vous serez étonné de voir.
    Ah! En effet, pas de fantaisie, de notification m'a présenté aux privilèges de la 1-mille-s. Merci 🙂

    OriginalL'auteur Sunyatasattva

  2. 1

    Ajouter une classe pour les liens, puis de les utiliser. 

      $(".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;
    });

    Démo: http://jsfiddle.net/calder12/Er7NN/

    OriginalL'auteur Rick Calder

  3. 0

    Alors permettre l'utilisation normale de la liaison, avec le href attribut:

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

    Malgré la return false, ce qui devrait encore travailler, puisque votre click gestionnaire n'est pas en cause quand un clic droit et en sélectionnant "ouvrir dans un nouvel onglet" dans le navigateur-rendus menu contextuel.

    OriginalL'auteur Lightness Races in Orbit