感谢浏览,欢迎交流=。=


公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神),

手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题,

于是决定写一个插件,专门对付手机网页的弹窗。

弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动。

几处认为需要留意的知识点或困难点:

1.事件冒泡:

e.preventDefault()阻止事件默认行为。

event.stopPropagation();阻止事件冒泡

在jquery中return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:
if (ret===false){
  event.preventDefault();
  event.stopPropagation();
}

2.js单例的写法:

使用闭包的这种特性可以达到一些令人开心的效果,插件中singleMask和singleDialogManager均使用了单例,代码可总结为如下:

3.弹窗及内部宽度高度的计算,感觉有的时候写这些代码真的需要拿张纸画画。

4.关于滚动条滚到顶部和底部

elem.clientHeight + elem.scrollTop - elem.scrollHeight == 0可以判断滚动条是否到底部

elemDialogContent.scrollTop == 0可以判断滚动条是否在顶部

5.关于touchstart,touchmove,touchend获取触摸点

e.originalEvent.touches是一个数组,描述多个触摸事件

后触摸的touchstart事件将触发滚动,所以这里touchmove事件中监控touches[touches.length - 1]这个对象

6.结合上面的4和5条,可以控制其对滚动的响应,通过e.preventDefault()阻止默认滚动行为。核心代码如下:

代码展示:

jquery.dialog.js

dialog.css

页面调用代码:

$("#test-btn").bind({//弹窗代码
  "touchstart": function () {
    $("#test-dialog").dialog({
      title: "弹窗测试",
      width: 1000,
      height: 1000
    });
    return false;
  }
})

$("#test-dialog").dialog({"close":true})//关闭代码

最终效果:

代码在GitHub上:

整天用人家开源的,咱也开源吧:https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/dialog

自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)的更多相关文章

  1. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  2. h5手机端下拉选择城市

    <!doctype html><html>    <head>            <meta http-equiv="Content-Type& ...

  3. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  4. H5手机端关注的问题

    手机端页面写css时应该注意的问题: 设备的屏幕尺寸   设备的分辨率   用户的操作习惯以及点击区域的大小   移动端浏览器的特性   鉴于分辨率等情况而引出的图片尺寸.布局方式等诸多细节问题   ...

  5. 关于h5手机端上拉加载和下拉刷新效果-1

    1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...

  6. jquery弹窗插件layer:layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  7. jquery 中的事件冒泡

    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...

  8. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  9. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

随机推荐

  1. Eclipse的下载、安装和WordCount的初步使用(本地模式和集群模式)

    包括:    Eclipse的下载 Eclipse的安装 Eclipse的使用 本地模式或集群模式 Scala IDE for Eclipse的下载.安装和WordCount的初步使用(本地模式和集群 ...

  2. vi / vim 删除以及其它命令

    删除一行:dd 删除一个单词/光标之后的单词剩余部分:dw 删除当前字符:x 光标之后的该行部分:d$ 文本删除 dd 删除一行 d$ 删除以当前字符开始的一行字符 ndd 删除以当前行开始的n行 d ...

  3. PHP 判断用户是否手机访问

    $agent = check_wap(); if( $agent ) { header('Location: http://www.lewanau.com'); exit; } // check if ...

  4. "用wow64exts调试64位任务管理器抓取的32位程序的dump"

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:"用wow64exts调试64位任务管理器抓取的32位程序的dump".

  5. FragmentTransactionExtended

    https://github.com/DesarrolloAntonio/FragmentTransactionExtended

  6. mongodb地理位置索引

    初始化集合(经度在前,纬度在后) ? 1 2 3 mongos> db.checkins.insert({ "_id" : "101", "lo ...

  7. SpringMVC + ehcache( ehcache-spring-annotations)基于注解的服务器端数据缓存

    背景 声明,如果你不关心java缓存解决方案的全貌,只是急着解决问题,请略过背景部分. 在互联网应用中,由于并发量比传统的企业级应用会高出很多,所以处理大并发的问题就显得尤为重要.在硬件资源一定的情况 ...

  8. Java加密算法 AES

    版权声明:本文为博主原创文章,转载请注明出处. [java] view plain copy print?在CODE上查看代码片派生到我的代码片 package com.stone.security; ...

  9. php中error_report函数的含义及各参数含义

    个错误级别,如下: 1        E_ERROR          致命的运行时错误.错误无法恢复过来.脚本的执行被暂停2        E_WARNING        非致命的运行时错误.脚本 ...

  10. android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...