Question

好的，我有一个使用SimpleModal jQuery插件的模态

http://www.ericmmartin.com/projects/simplemodal/

我将它附加到调用它的iframe的父文档中。基本上，单击它应该使用连接（或登录）模式窗口打开模式的链接。高度和宽度与链接中的href一起定义

为什么不关闭按钮（右上角的x）工作关闭模态（我甚至尝试将SimpleModal .close（）函数添加到我的jQuery中）

帧

我的链接就是这样..

<span class="makemodal"><a href="join-modal.html" data-height="362" data-width="500">Join</a></span>
<span class="makemodal"><a href="register-modal.html" data-height="302" data-width="700">Register</a></span>

我的jquery是......

  jQuery(document).ready(function($)
  {
    $('.makemodal a').click(function(){
        var h = $(this).data('height');
        var w = $(this).data('width');
        var src = $(this).attr('href');

        $.modal('<iframe src="' + src + '" style="border: 0; width: 100%; height: 100%;"></iframe>', {
            appendTo: $(window.parent.document).find('body'),
            containerCss:{
                height: h, 
                padding: 0, 
                width: w
            },
            opacity: 80,
            overlayCss: { backgroundColor:"#fff" },
            position: ["1%"],
            overlayClose: true
        });
        return false;
    });
    $('.modal-close').click( function() {
        $.modal.close();
    });
  });

模态正确打开，这会将模态放在父页面上，但关闭按钮不起作用。叠加单击以关闭作品（但是，叠加层仅在iframe元素上可见，而不是父元素）

进行测试，父很简单（正如您所看到的，它只是一个顶级栏菜单）

<body style="background-color: #000; margin: 0; color: #fff;">

    <iframe src="frame.php" scrolling="no" style="width: 100%; height: 30px; border: 0; overflow: hidden;"></iframe>

    <p>now is the time for all good men to come to the aid of their country.</p>
</body>

小提琴：https://jsfiddle.net/vcyjr0nd/

Answer 1

我会重新格式化您的代码:)首先，您必须转到页面http://sorgalla.com/lity/并下载lity，并获得这个更简单的解决方案（请记住，仅当您的服务器或服务器提供内容时才会这样做允许来自其他位置的iframe）：

<html>
<head>
<link href="dist/lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="dist/lity.js"></script>
</head>

<body>
<!-- Then format this however you like to -->
    <span><a data-lity href="join-modal.html">Join</a></span>
<span><a data-lity href="register-modal.html">Register</a></span>
</body>
</html>

当appendTo父级时SimpleModal没有关闭

1 个答案: