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

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

任何帮助将不胜感激！

我一直在玩所有这些选项，似乎没有工作。这就是问题 - ＆＃34;改变＆＃34;没有为表格开火。＆＃34;变更＆＃34;正在为弹出窗口开火，但是如果我将检查包裹起来进行更改在具有控制台日志的表单项中，它们很好，但是cosole日志里面的表格变化不会发生。这里的问题必须与之相关访问表单项，因为它们在iframe中！所以，我结束了我只是不使用默认的关闭按钮，使用modal = true，和我以编程方式在iframe中创建了自己的关闭按钮控制自己onLlick按钮类和。父$ 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中，这不会出现在原始代码中。

Answer 2

根据上面的代码，我做了一个适合你案例的例子。这意味着它适用于任何文本输入以及textarea。

$('#open-popup').magnificPopup({
  type:'iframe',
  iframe: {
    markup: '<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>'
  },
  callbacks: {
    change: function() {
      var $form = $(this.content[0]),
          values = {},
          changed = [];
      $form.find('input[type=\'text\'], textarea').each(function() {
        values[this] = this.value;
      });
      $form.on('change', function(e) {
        var input = e.target, 
            index = changed.indexOf(input);
        if (input in values) {
          if (input.value !== values[input] && index === -1) { 
            changed.push(e.target);
          } else if (e.target.value === values[e.target] && index !== -1) {
            changed.splice(index, 1);
          }
        }
      });
      $.magnificPopup.instance.close = function () {
        if (changed.length && !confirm('Are you sure?')) {
          return;
        }
        $.magnificPopup.proto.close.call(this);
      };
    }
  }
});

Answer 3

使用像这样的隐藏输入

<input id="hf1" type="hidden" value="" />
<input id="hf2" type="hidden" value="" />

然后在你的javacripts中使用这个：

$('#hf2').val($('#Notes').val());
 $('#Notes').on('change', function () {
     $('#hf1').val($(this).val());
 });

然后致电：

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

            $.magnificPopup.instance.close = function () {
                 if($('#hf1').val() != $('#hf2').val()){
                     if (!confirm("Are you sure?")) {
                     return;
                  }
              }
       $.magnificPopup.proto.close.call(this);
       }
,  iframe: {
   markup: '<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>'
          }    
   });

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

3 个答案: