js模态窗口

标签：

用法是重点： 

$(‘#modaltrigger‘).leanModal({ top: 310, overlay: 0.85, closeButton: ".hidemodal" });

这句话的意思就是id号为#modaltrigger的元素（比如一个div）点击后能触发模态窗口弹出，

如例子中所示：

<a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a>

注意这个href="#loginmodal"，这个是指向要显示于modal窗口上的那个div，

如例子所示：

<div id="loginmodal" style="display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -150px; top: 310px;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
    </form>
  </div>

#loginmodal这个div原本

display: none

但是被注册到这个模态窗口以后当模态窗口触发的时候就会连同它一道显示，置为

display: block

然后#loginmodal会随着模态窗口的关闭重新

display: none

剩下的解释下参数：

top属性是该div距离顶部的距离，

overlay就是透明度，

closeButton就是标识另一个元素（这里就是带有.class为".hidemodal"的元素）能关闭该模态窗口，像这里的demo就是点击按钮就关闭模态窗口

另外本人还研究了另一项：

就是修改jquery.leanModal.min.js文件，

改为$("#lean_overlay").click(function(){/*close_modal(modal_id)*/});

这样能做什么呢？就是点击那个模态窗口它不会自动关闭，也就说必须要点击带有.class为".hidemodal"的元素才能关闭模态窗口，原来是点击模态窗口本身它自己就关闭了。

js模态窗口

标签：

原文地址：http://my.oschina.net/u/555061/blog/485263