4

私はウェブページを開発しています。Web ページには、「View Page」と呼ばれるハイパーリンクがあります。クリックすると、リンク先のページがモーダル ダイアログに表示されます。

これを実現するために使用するコードは次のとおりです。

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

以下のような機能を実装して、ユーザーが[ページの表示]リンクを右クリックし、[新しいタブで開く] または [新しいウィンドウで開く] を選択して、新しいタブまたは新しいウィンドウで SomeValidUrl を開く方法はありますか? ユーザーがSomeValidUrlを左クリックすると、モーダル ダイアログでページが開きます。

4

3 に答える 3

2

は本当に問題ありませんreturn false。実際にあなたはすべきです！そうしないreturn falseとpreventDefault、モーダルが開き、リンクがトリガーされて、他のページに転送されます。

ユーザーがリンクを右クリックして新しいウィンドウ/タブで開く場合にこれを機能させたい場合は、要素の属性を（SomeValidURLのsrc属性にiframe）入力するだけで十分です。 。hrefa

また、一般的なヒントとして、イベントをインラインでバインドすることは避けてください。むしろ使用してjQuery.onください：それはより柔軟性があり、関心の分離のベストプラクティスに固執し、そしてそれは本当に混乱を助けます。

于 2013-03-14T15:49:05.290 に答える
1

リンクにクラスを追加してから、これを使用します。

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

デモ: http://jsfiddle.net/calder12/Er7NN/

于 2013-03-14T16:02:42.500 に答える
0

href次に、次の属性を使用して、リンクの通常の使用を許可します。

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

にもかかわらず、ブラウザでレンダリングされたコンテキスト メニューを右クリックして [新しいタブで開く] を選択するときにハンドラが関与しないreturn falseため、これは引き続き機能するはずです。click

于 2013-03-14T17:16:15.287 に答える