javascript - JavaScript/JQuery を使用して同じページにポップアップ

Question

HTML ページにリンクを作成して、ユーザーがクリックすると特定の画像の「ポップアップ」が表示されるようにしたいと考えています。さて、主なことは、このポップアップをブラウザの新しいタブ/ウィンドウにしたくないということです。ページ自体の一部にしたい。ポップアップが別ウィンドウのようにページ内を移動できると便利です。

これを実現できる JavaScript/JQuery ライブラリはありますか?

Answer 1

これでうまくいくはずです：http://jsfiddle.net/55DBx/1/

jQuery と jQuery UI を利用します。幸運を！

jQuery:

$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

HTML:

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>

Answer 2

jQueryUIダイアログはまさにあなたが探しているものです。

次のように、ポップアップの「ウィンドウ」を DIV で定義できます。

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

次に、ユーザーがリンクをクリックしたときに、次のように jQuery を介してダイアログを表示できます。

<script>
    $("#YourLink").click(function(e) {
        e.preventDefault();
        $("#dialog").dialog();  
        return false;  
    });  
</script>