确认关闭 - 仅当用户键入Magnific Popup内的表单时

Question

我试图获得一个确认框,只有当用户更改了显示在iframe中的内容的magnific弹出窗体中的表单时才会弹出.

<a href="#" class="opener-class" data-mfp-src="/whatever.asp" data-lightbox="iframe" data-plugin-options='{"type":"iframe"}'>

码:

$('.opener-class').magnificPopup({
   type:'iframe',
   change: function() {
      $.magnificPopup.instance.close = function () {
         if (!confirm("Are you sure?")) {
            return;
         }
         $.magnificPopup.proto.close.call(this);
      };                                    
   }
});

变化似乎不起作用.我尝试将表单绑定在open中:就像我们在我们网站的其他部分上所做的那样,但这也不起作用.

$(':input', document.myForm).bind("change", function() {
      //confirm here
   }
);

提交的whatever.asp页面上的表单示例的HTML - 如果在该文本框中有任何更改,我希望确认关闭显示:

<form class="validate" action="/whatever.asp" method="post">
    <label>Notes</label>
    <textarea class="form-control input-sm required" name="Notes" id="Notes" rows="3"></textarea>
</form>

我认为问题是代码在父页面上,然后在iFrame中打开一个巨大的弹出内容.

任何帮助,将不胜感激!

我一直在玩所有这些选项,似乎没有一个工作.这是问题 - "更改"不是为表单触发."更改"正在为弹出窗口触发,但是如果我使用控制台日志包装检查表单项的更改,它们就可以了,但是表单更改中的cosole日志不会触发.这里的问题必须是访问表单项,因为它们在iframe中!所以,我最终只是没有使用默认的关闭按钮,使用modal = true,并在iframe中创建了我自己的关闭按钮,我以编程方式控制自己onLlick on button class and parent.$.magnificPopup.close(); 来自iframe内部 - 就像一个魅力.

Answer 1

我已经为我相信你正在努力实现的目标制作了一个 CodePen。

http://codepen.io/gbhojraj/pen/VaVPRM?editors=1010

相关代码如下：

$('#open-popup').magnificPopup({
  type:'iframe',
  callbacks: {
        open: function() {

            contents = $('#Notes').val();

            $.magnificPopup.instance.close = function () {
                 if(contents != $('#Notes').val()){
                     if (!confirm("Are you sure?")) {
                     return;
                  }
              }
       $.magnificPopup.proto.close.call(this);
  };

}

我所做的是在事件触发contents时用文本输入中的值填充变量Open。然后，当Close调用 时，它会检查文本输入的值是否与 的值相同contents，该值自初始化以来未曾更改。

重要的是将open参数嵌套在 中callbacks，这不会出现在原始代码中。