SimpleModal 在 appendTo parent 时不关闭

Question

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

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

我将其附加到调用它的 iframe 的父文档。基本上，单击 link 它应该使用加入（或登录）模式 windows 打开模式。 link

中随 href 一起定义的高度和宽度

为什么关闭按钮（右上角的 x）无法关闭模态（我什至尝试将 SimpleModal .close() 函数添加到我的 jQuery）

帧

我的link就是这样..

<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 元素上可见，而不是父元素）

为了测试，parent 很简单（如您所见，它只是一个顶部栏菜单）

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

fiddle: 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>

SimpleModal 在 appendTo parent 时不关闭

SimpleModal not closing when appendTo parent

jquery

simplemodal

eric-martin-modal