效果体验:
http://hovertree.com/texiao/html5/17/

效果图：

代码如下：

 <!doctype html>

 <html lang="zh">

 <head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起</title><base target="_blank" />

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/reset.css"> <!-- CSS reset -->

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/style.css"> <!-- Resource style -->

 <!--[if IE]>

 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>

 <![endif]-->

 </head>

 <body>

 <div class="sucaihuo-container">

 <section class="cd-section">

 <a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">显示菜单</a>

 </section>

 <div><a href="http://hovertree.com/h/bjaf/menulayer.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>  <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>

 </div>

 <div class="cd-bouncy-nav-modal">

 <nav>

 <ul class="cd-bouncy-nav">

 <li><a href="http://hovertree.com/">首页</a></li>

 <li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>

 <li><a href="http://hovertree.com/menu/php/">PHP</a></li>

 <li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li>

 <li><a href="http://hovertree.com/texiao/easysector/">饼图</a></li>

 <li><a href="http://tool.hovertree.com/">工具</a></li>

 </ul>

 </nav>

 <a href="#0" class="cd-close" target="_self">关闭菜单</a>

 </div>

 </div>

 <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>

 <script src="http://hovertree.com/texiao/html5/17/main.js"></script> <!-- Resource jQuery -->

 </body>

 </html>

更多特效： http://www.cnblogs.com/jihua/p/webfront.html

html5手机端遮罩弹出菜单代码的更多相关文章

  1. js 监听手机端键盘弹出和收起事件

    //这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.html const ua = typeof window == ...

  2. js手机端图片弹出方法

    1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...

  3. JQuery弹出菜单时禁止页面（body）滚动

    最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...

  4. query简洁弹出层代码

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  5. pythonGUI菜单栏和弹出菜单

    菜单栏代码: from tkinter import * root = Tk() menubar = Menu(root) def callback(): pass filemenu = Menu(m ...

  6. HTML5微信长按图片不会弹出菜单的解决方法

    HTML5微信长按图片不会弹出菜单的解决方法 <pre><div ontouchstart = "return false;"></div>&l ...

  7. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  8. Swing-JPopupMenu弹出菜单用法-入门

    弹出菜单是GUI程序中非常常见的一种控件.它通常由鼠标右击事件触发,比如在windows系统桌面上右击时,会弹出一个包含“刷新”.“属性”等菜单的弹出菜单.Swing中的弹出菜单是JPopupMenu ...

  9. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

随机推荐

  1. 谈谈php里的IOC控制反转，DI依赖注入

    理论 发现问题 在深入细节之前,需要确保我们理解"IOC控制反转"和"DI依赖注入"是什么,能够解决什么问题,这些在维基百科中有非常清晰的说明. 控制反转(In ...

  2. Unix及类Unix系统文本编辑器的介绍

    概述 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.VIM是纯粹的自由软件. Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Em ...

  3. 收集的React.JS资料

    主页 http://facebook.github.io/react/ https://github.com/facebook/react   中文站 http://www.reactjs.cn/ h ...

  4. 数据可视化-EChart2.0使用总结2

    接上一篇博客,这篇博客主要讨论EChart里面的散点图.气泡图和雷达图.   4.散点图-Scatter Chart 适合场景:三维数据集,但是只有两个维度需要比较.比较的是X轴和Y轴的数据,第三个数 ...

  5. Objective-C中的Block回调模式

    在前面的博客中提到了Block的概念和使用方法,个人感觉Block最爽的用法莫过于在回调时用block.感觉比委托回调和目标方法回调用着要顺手,好不好用还得读者亲自用一下才知道.如果 读者之前用过SS ...

  6. sqoop数据导出导入命令

    1. 将mysql中的数据导入到hive中 sqoop import --connect jdbc:mysql://localhost:3306/sqoop --direct --username r ...

  7. JS详细入门教程（上）

    首先,我们看一下DOM级别和兼容性: 之前好像在某本上看到说DOM有0级,实际上,DOM0级标准是不存在的.DOM有1.2.3三个级别.DOM1级由两个模块组成(DOM Core和DOM HTML), ...

  8. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

  9. sessionid如何产生？由谁产生？保存在哪里？

    面试问道这个我居然不知道怎么回答,当然也是因为我确实没有研究过.下面就是百度了一篇文章后简单回答这个问题. 参考:http://www.cnblogs.com/sharpxiajun/p/339560 ...

  10. 30 个惊艳的 Bootstrap 扩展插件

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...