Question

我有一些jquery代码在模态窗口中显示iframe。

此代码：

<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链接？

Answer 1

您可以在标记

中的附加参数内发送网址

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

Answer 2

修改你的js以在类而不是ID上触发，并修改链接以使用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>

Iframe jQuery Modal的不同链接

2 个答案: