Question

我是JQuery的新手，我正在尝试在页面中添加一个弹出框我正在使用以下jQuery插件（从Ray Stone的leanModal中采用）：

(function($) {
  $.fn.extend({
    leanModal: function(options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeButton: null
      };
      var overlay = $("<div id='lean_overlay'></div>");
      $("body").append(overlay);
      options = $.extend(defaults, options);
      return this.each(function() {
        var o = options;
        $(this).click(function(e) {
          var modal_id = $(this).attr("href");
          $("#lean_overlay").click(function() {
            close_modal(modal_id)
          });
          $(o.closeButton).click(function() {
            close_modal(modal_id)
          });
          var modal_height = $(modal_id).outerHeight();
          var modal_width = $(modal_id).outerWidth();
          $("#lean_overlay").css({
            "display": "block",
            opacity: 0
          });
          $("#lean_overlay").fadeTo(200, o.overlay);
          $(modal_id).css({
            "display": "block",
            "position": "fixed",
            "opacity": 0,
            "z-index": 11000,
            "left": 50 + "%",
            "margin-left": -(modal_width / 2) + "px",
            "top": o.top + "px"
          });
          $(modal_id).fadeTo(200, 1);
          e.preventDefault()
        })
      });

      function close_modal(modal_id) {
        $("#lean_overlay").fadeOut(200);
        $(modal_id).css({
          "display": "none"
        })
      }
    }
  })
})(jQuery);

我的CSS看起来像这样：

#lean_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
  background: #000;
  display: none;
}
#signup {
  width: 404px;
  padding-bottom: 2px;
  display:none;
  background: red;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
  -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}

我的初始化脚本如下所示：

<script type="text/javascript">
  $(function() {
    $("#signup").leanModal();
  });
</script>

最后，这是我正在使用的HTML：

<p id="examples" class="section box">
  <strong>Example:</strong>
  <a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a>
</p>

<div id="signup">
  <div id="signup-ct">
    <div id="signup-header">
      <h2>This is a test</h2>
      <p>testing.</p>
      <a class="modal_close" href="#"></a>
    </div>
  </div>
</div>

使用此代码，弹出窗口不会出现＆amp;我有一种感觉，必须有一个非常简单的解决方案，但我正在打破我的大脑试图解决它。您将给予的任何帮助将不胜感激！

Answer 1

我了解其他人建议使用现有的库（强烈推荐）。但是，如果你想用你的特定代码解决问题，我认为你做错了：

你正在通过'leanmodal'电话挂钩错误的元素。

我创建了一个jsFiddle，它会在单击链接时弹出所需的对话框。你可以在这里访问它： http://jsfiddle.net/eWUgE/

基本上，我修改了以下行：

$("#signup").leanModal();

成为：

$('#go').click(function() { 
    $(this).leanModal(); 
});

Answer 2

绝对最好的解决方案之一就是使用jquery UI。如果您不需要整个库，则只能下载模态插件。

CHEARS

使用JQuery弹出框

2 个答案: