0

iframe をモーダル ウィンドウに表示する jquery コードがあります。

このコード:

<script type="text/javascript">
      $(document).ready(function() {
            $("#modalDiv").dialog({
                modal: true,
                autoOpen: false,
                height: '800',
                width: '800',
                draggable: false,
                resizeable: false,   
                title: 'IFrame Modal Dialog'
            });
            $('#goToMyPage').click(
                function() {
                    url = '/addnews.html';
                    $("#modalDiv").dialog("open");
                    $("#modalIFrame").attr('src',url);
                    return false;
            });                 
      });
</script>

HTML:

<a id="goToMyPage" href="#">Go to My Page</a>
<div id="modalDiv">
<iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe>
</div>

私は1つのリンクに使用できます。このリンク：

url = '/addnews.html';

HTML:

<a id="goToMyPage" href="#">Go to My Page</a>

このコードを 4 ～ 5 個のリンクに使用するにはどうすればよいですか?

4

2 に答える 2

1

タグ内の追加パラメータ内でURLを送信できます

<a id="goToMyPage" href="#" data-url="some-url" >Go to My Page</a>

そしてあなたのイベントでそれを使用してください 

$('.goToMyPage').click(
            function(e) {
                e.preventDefault();
                url = $(this).attr('data-url');
                $("#modalDiv").dialog("open");
                $("#modalIFrame").attr('src',url);
                return false;
        });
于 2012-09-21T10:46:58.113 に答える
0

ID ではなくクラスでトリガーするように js を変更し、href e.preventDefault() を使用するようにリンクを変更して、リンクが正常に開かないようにします

       $('.goToMyPage').click(
            function(e) {
                e.preventDefault();
                url = $(this).prop('href');
                $("#modalDiv").dialog("open");
                $("#modalIFrame").attr('src',url);
                return false;
        });

次に、リンクを次のようにします

<a class="goToMyPage" href="addnews.html">Go to My Page</a>
于 2012-09-21T10:19:54.283 に答える