当 appendTo 父级时 SimpleModal 不关闭答案

【问题标题】：SimpleModal not closing when appendTo parent当 appendTo 父级时 SimpleModal 不关闭
【发布时间】：2016-01-05 18:08:06
【问题描述】：

好的，我有一个使用 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 元素上可见，而不是父元素）

对于测试，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>

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

【问题讨论】：

你能创建一个快速的 jsfiddle 吗？
jsfiddle 添加到主要问题
添加 closeHTML:'<a class="modalCloseImg modal-close" title="Close" onclick="document.location.reload();"></a>', 将重新加载框架，做必要的事情，但不漂亮或漂亮

标签： jquery simplemodal eric-martin-modal

【解决方案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>

【讨论】：

我会接受你对未来有问题的人的回答，但会保留我当前的解决方案（因为它“只是一个顶部栏菜单”，我的老板不希望我花更多时间在上面）