Question

寻求一些帮助，以确定为什么我无法将我的模态框中的事件绑定到onShow的问题。如果我只是输入一条警告信息，我可以看到触发了onShow。但我真正想做的是捕获Reset事件并使用它来触发ajax回调服务以向用户发送电子邮件。

我使用以下命令创建模态：

<li class="actions-text"><a class="modal-s" href="modal/modal-password.jsp">Forgot Password?</a></li>

然后会触发以下java脚本：

    $('.modal-s').click(function (e) {
        $.modal('<iframe src="' + this.href + '" height="230" width="480" scrolling="no">', {
            overlayClose:true,
            onOpen: function (dialog) { 
                dialog.overlay.fadeIn('slow', function () { 
                    dialog.container.slideDown('slow', function () {
                        dialog.data.fadeIn('slow');
                    });
                });
            },
            onClose: function (dialog){ 
                dialog.data.fadeOut('slow', function () {   
                    dialog.container.slideUp('slow', function () {
                        dialog.overlay.fadeOut('slow', function () {
                            $.modal.close(); 
                        });
                    });
                });
            },
            onShow: function (dialog) {
                $("form", dialog.data).submit(function () {
            alert('submitting the form');
            parent.jQuery.modal.close();
                });
            }
        });
        return false;
    });

模式是：

            <form name="resetPasswordForm" id="resetPasswordForm">
            <dl class="form">
                <dt><label>Email:</label></dt>
            <dd><input type="email" id="passwordResetEmail" name="passwordResetEmail"/></dd>
            <dd class="clear">&nbsp;</dd>
                </dl>
            <ul class="actions">
                <li class="actions-submit"><input type="submit" class="button" value="Reset" id="submitPasswordReset" name="submitPasswordReset"/></li>
                </ul>
            </form>

Answer 1

问题的核心是使用iframe加载外部文件。将此选择器添加到SimpleModal的onShow：

时

$("form", dialog.data)

...评估为：

$('div#simplemodal-data.simplemodal-data form')

但是因为你的DOM实际上是iframe：

<div id="simplemodal-data" class="simplemodal-data" style="">
  <iframe width="480" scrolling="no" height="230" src="http://192.168.0.189:8082/sm/modal-password.php"></iframe>
</div>

这意味着如果有可能你真的需要一个选择器，如：

div#simplemodal-data.simplemodal-data > iframe > html > body > form

当然，您无法以这种方式访问iframe，同样，您也无法捕获iframe中的点击并将事件冒泡到父页面。

我很惊讶这是SimpleModal对外部内容的解决方案。

我能想到的两个解决方案是：1）将外部内容添加到同一页面上的隐藏div中;或者2）使用jQuery的load（）方法填充页面上的空div，然后显示模态。

选项1如下所示：

<a class="modal-s" href="#">Forgot Password?</a>
<!-- hide this div in css -->
<div id="modal-content">
  <form name="resetPasswordForm" id="resetPasswordForm">
    <dl class="form">
      <dt>
        <label>
          Email:
        </label>
      </dt>
      <dd>
        <input type="email" id="passwordResetEmail" name="passwordResetEmail"/>
      </dd>
      <dd class="clear">
        &nbsp;
      </dd>
    </dl>
    <ul class="actions">
      <li class="actions-submit">
        <input type="submit" class="button" value="Reset" id="submitPasswordReset" name="submitPasswordReset"/>
      </li>
    </ul>
  </form>
</div>

JS：

$('.modal-s').click(function(e){
  $('#modal-content').modal({
    overlayClose: true,
    onOpen: function(dialog){
      dialog.overlay.fadeIn('slow', function(){
        dialog.container.slideDown('slow', function(){
          dialog.data.fadeIn('slow');
        });
      });
    },
    onClose: function(dialog){
      dialog.data.fadeOut('slow', function(){
        dialog.container.slideUp('slow', function(){
          dialog.overlay.fadeOut('slow', function(){
            $.modal.close();
          });
        });
      });
    },
    onShow: function(dialog){
      $("form", dialog.data).submit(function(){
        alert('submitting the form');
        parent.jQuery.modal.close();
      });
    }
  });
  return false;
});

选项2：

<a class="modal-s" href="#">Forgot Password?</a>
<!-- hide this div in css -->
<div id="modal-content"></div>

JS：

$('.modal-s').click(function(e){
  //note use of load()
  $('#modal-content').load('modal-password.php', function(){
    $('#modal-content').modal({
      overlayClose: true,
      onOpen: function(dialog){
        dialog.overlay.fadeIn('slow', function(){
          dialog.container.slideDown('slow', function(){
            dialog.data.fadeIn('slow');
          });
        });
      },
      onClose: function(dialog){
        dialog.data.fadeOut('slow', function(){
          dialog.container.slideUp('slow', function(){
            dialog.overlay.fadeOut('slow', function(){
              $.modal.close();
            });
          });
        });
      },
      onShow: function(dialog){
        $("form", dialog.data).submit(function(){
          alert('submitting the form');
          parent.jQuery.modal.close();
        });
      }
    });
  });
  return false;
});

注意：这很笨重，因为每次点击触发链接时它都会拉取外部数据。看看它是否已经加载并保存额外的电话可能更明智，但你明白了。

JQuery SimpleModal无法绑定到onShow

1 个答案: