jqModal网站：http://dev.iceburg.net/jquery/jqModal/

整理的几个例子：

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>http://dev.iceburg.net/jquery/jqModal/</title> <link href="jqModal.css" mce_href="jqModal.css" rel="stylesheet" type="text/css" /> <mce:script src="jquery.js" mce_src="jquery.js" type="text/javascript"></mce:script> <mce:script src="jqModal.js" mce_src="jqModal.js" type="text/javascript"></mce:script> <mce:script src="jqDnR.js" mce_src="jqDnR.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" language="javascript"><!-- $().ready(function() { $('#divCreate').jqm({trigger: '#create'}); // $('#divCreate').jqm({modal: true, trigger: '#create'}); //加上modal:true,可以使背 景不可点击 /*-------------------------------------*/ $('#divDialog').jqm(); /*-------------------------------------*/ $('#ex2').jqm({ajax: 'Test.aspx', trigger: 'a.ex2trigger'}); /*-------------------------------------*/ $('#ex3a').jqm({ modal:true, trigger: '#ex3aTrigger', overlay: 50, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */ overlayClass: 'whiteOverlay'}) .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */ // Close Button Highlighting. IE doesn't support :hover. Surprise? $('input.jqmdX') .hover( function(){ $(this).addClass('jqmdXFocus'); }, function(){ $(this).removeClass('jqmdXFocus'); }) .focus( function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); }) .blur( function(){ $(this).removeClass('jqmdXFocus'); }); }); // --></mce:script> </head> <body> <form id="form1" runat="server"> <a href="javascript:void(0);" mce_href="javascript:void(0);" id="create"><img title="新建" alt="新建" src="data:images/ico/folder_new.gif" /> 新建文件夹</a> <div id="divCreate" class="jqmWindow" style="display:none;" mce_style="display:none;"> <h3>新建文件夹</h3> 名称：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="btnCreateFolder" runat="server" Text="确定" /> <asp:Button ID="btnPanel2Cancel" runat="server" Text="取消" /> <br /> <a href="#" mce_href="#" class="jqmClose">关闭</a> </div> <br /> ------------------------------------------------------------------------------------ <br /> 默认： <br /> <a href="#" mce_href="#" class="jqModal">view</a> <div class="jqmWindow" id="divDialog"> <a href="#" mce_href="#" class="jqmClose">Close</a> <hr> This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this. The demonstrations on this page will show off a few possibilites. I recommend walking through each one to get an understanding of jqModal <i>before</i> using it. </div> <br /> ------------------------------------------------------------------------------------ <br /> AJAX： <br /> <a href="#" mce_href="#" class="ex2trigger">Ajax</a> <div class="jqmWindow" id="ex2"> Please wait... <img src="data:images/busy.gif" mce_src="data:images/busy.gif" alt="loading" /> </div> <br /> ------------------------------------------------------------------------------------ <br /> Dialog： <br /> <a href="#" mce_href="#" id="ex3aTrigger">view</a> (dialog) <div id="ex3a" class="jqmDialog"> <div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div> <div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC"> <div class="jqmdMSG"> Styled windows or dialogs are easy! <br /><br /> This particular theme was done for poMMo -- feel free to borrow the styling, or use it as a reference when creating your own. CSS and Markup is available under the HTML + CSS tabs of example 3a. <br /> <input type="button" value="确定" /> </div> </div></div></div> <input type="image" src="data:images/close.gif" mce_src="data:images/close.gif" class="jqmdX jqmClose" /> </div> </form> </body> </html>

jQuery jqModal弹出层相关推荐

  1. jQuery实现 弹出层效果

    ###jQuery实现 弹出层效果 点击弹出层:弹出弹出层 点击阴影:关闭弹出层 点击"关闭"关闭弹出层 整体代码如下: <!DOCTYPE html> <htm ...

  2. html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层

    我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC ...

  3. JQuery 操作弹出层 iframe页面元素的方式

    一.问题描述:如下图,在某个页面弹出一个iframe页面A,再在A弹出一个iframe页面B,需要操作这个B页面的元素 (一)图述 图1 (2)A页面的弹出方法,其中simpleDialog是封装好的 ...

  4. 弹出层之2：JQuery.BlockUI

    JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...

  5. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  6. layer——极简的jquery弹出层插件

    官网:http://layer.layui.com/ 作者:贤心  jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...

  7. Jquery UI dialog弹出层插件

    必须先下载Jquery UI插件 然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...

  8. 分享123个JS特效弹出层，总有一款适合您

    分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo  提取码: ...

  9. Jquery 点击图片在弹出层显示大图

    [转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...

  10. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

最新文章

  1. 【Unity 3D】学习笔记三十六：物理引擎——刚体
  2. 学习和在生产环节使用d语言的三个条件
  3. string 替换_vim怎么查找与替换文字？比Windows记事本效率高太多了
  4. Leetcode232使用栈实现队列
  5. swot分析法案例_新媒体小白如何上手案例分析（SWOT分析法）
  6. lucene 入门整理
  7. dotnet core 微服务教程
  8. linux 磁盘扩容_记录一次ESXi Linux在线扩容，不重启系统
  9. 数据结构之交换排序：冒泡排序
  10. x390拆机_用了七八年的笔记本电脑依然流畅如初，从X230i换到X390
  11. “进化”的搜索方式：揭秘微软语义搜索背后的技术
  12. JSON在Java中的使用（一）
  13. 暴风影音2009 去广告的方法
  14. 科技论文写作个人心得
  15. 跟着团子学SAP PS：SAP PS模块常用报表介绍及增强建议
  16. 怎么把PDF文件转换成图片？这两种方法可以收藏下来
  17. RecyclerView在GridLayoutManager情况下实现四周都有分割线的ItemDecoration
  18. 概率DP——BZOJ4008 [HNOI2015]亚瑟王
  19. java中map参数封装到bean_JavaBean和Map转换封装类详解
  20. YOLOv1论文翻译

热门文章

  1. 对冲基金表现大盘点（二）：Citadel
  2. 财子说丨王国斌：相信时间的力量
  3. Rust: codewars的prize draw算法
  4. 阿里云贾扬清发布大数据+AI产品体系“阿里灵杰” | 云栖大会
  5. Cephalocon 2020首尔峰会取消
  6. OpenInfra中国日志愿者第三次会议召开
  7. 【优化算法】爬虫搜索算法（RSA）【含Matlab源码 1838期】
  8. 【水果识别】基于matlab GUI阈值分类器草莓识别【含Matlab源码 653期】
  9. 【TSP】基于matlab遗传算法求解30城市旅行商问题【含Matlab源码 135期】
  10. 深度学习分类pytorch_立即学习AI：02 —使用PyTorch进行分类问题简介