jquery - 确认关闭 - 仅当用户在放大弹出窗口内输入表单时

Question

仅当用户对大型弹出窗口中的表单进行更改时，我才尝试弹出确认框在 iframe 中显示其内容。

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

改变似乎不起作用。我尝试将表单绑定(bind)在 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 中打开一个放大的弹出内容。

如有任何帮助，我们将不胜感激!

I have been playing around with all these options and none seem to work. Here's the issue - the "change" is not firing for a form. "change" is firing for the popup, but if I wrap the check for a change in a form item with console logs, they are fine, but the cosole log inside the form change does not fire. The issue here has to be with accessing the form items since they are in an iframe!!! So, I ended up just not using the default close button, using modal=true, and created my own close button inside the iframe that I programmatically control myself onclick on the button class and parent.$.magnificPopup.close(); from inside the iframe - works like a charm.

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

}

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

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