当前位置: 首页 > 工具软件 > LeanModal > 使用案例 >

jQuery弹出窗口插件LeanModal的使用方法

昝唯
2023-12-01

步骤 1: 将 JQuery,jquery.leanModal.min.js 添加到您的页面:

<script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="Javascript/jquery.leanModal.min.js" type="text/javascript"></script> 

步骤 2:  覆盖层样式,将下列css添加到样式中。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


步骤 3:  将要弹出的窗口开始设置为隐藏

#show {display:none;}  


步骤 4: 设置触发器

<a href="#show" id="modaltrigger"> 点击弹出窗口 </a>


步骤 5:  弹出的窗口设置
<div id="show" >弹出窗口区域</div>  

步骤 6:  最后一步调用以下函数

$("#modaltrigger").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });




 类似资料: