jquery的SimpleModal插件的使用
2013-10-12 21:40
274 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="../jquery.min.js"></script> <script src="../jquery.simplemodal-1.4.4.js"></script> <script> $(function(){ $("#btn").click(function(){ $("#mydiv").modal(); }) } ); </script> <style> #mydiv{ display:none; } #simplemodal-overlay {background-color:#000;} #simplemodal-container {height:200px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;} #simplemodal-container a.modalCloseImg {background:url(simplemodal-demo/simplemodal-demo-basic-1.4.4/basic/img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;} .STYLE1 { font-size: larger; font-weight: bold; } </style> </head> <body> <button id="btn">执行</button> <div id="mydiv"> <h1>提示</h1> <div>这是模态窗口提示的内容!</div> <div align="right"><a class="simplemodal-close STYLE1">关闭</a> </div> </div> </body> </html>
完整的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> … </head> <body> <button id="btn"> 执行 </button> <span id="simplemodal-placeholder" style="display: none;"></span> <div id="simplemodal-overlay" class="simplemodal-overlay" style="opacity: 0.5; height: 171px; width: 1366px; position: fixed; left: 0px; top: 0px; z-index: 1001;"></div> <div id="simplemodal-container" class="simplemodal-container" style="position: fixed; z-index: 1002; height: 200px; width: 600px; left: 367px; top: -30.5px;"> <a class="modalCloseImg simplemodal-close" title="Close"></a> <div class="simplemodal-wrap" tabindex="-1" style="height: 100%; outline: 0px none; width: 100%; overflow: visible;"> <div id="mydiv" class="simplemodal-data" style="display: block;"> <h1> … </h1> <div> … </div> <div align="right"> … </div> </div> </div> </div> </body> </html>
相关文章推荐
- JQuery插件simplemodal-basic弹出层的使用
- JQuery上传插件Uploadify使用详解
- Jquery 多选插件使用
- form 表单jquery验证插件使用
- 使用jQuery.form插件,实现完美的表单异步提交
- SimpleModal使用jquery高版本无法设置高度
- jquery插件Jplayer使用方法简析
- 使用jquery的插件的时候,插件不生效
- jquery表单插件Autotab使用方法详解
- jQuery验证插件validate使用详解
- jquery.cookie插件官方下载地址与使用方法
- ASP.NET MVC 3程序(二): 如何使用JQuery插件Overlay
- jquery fullcalendar 日历日程插件使用
- jQuery 兼容ie6的固定定位插件,使用简单
- 使用Jquery.pagination插件实现分页
- 在Asp.net中使用JQuery插件之jTip代码
- jQuery LigerUI 插件介绍及使用之ligerTree
- jQuery Validate 表单验证插件使用方法
- 使用jquery的imagecropper插件做用户头像上传 兼容移动端
- Jquery.Page.js 分页插件的使用