自助移动端弹窗

移动端能用alert弹窗么?嘿嘿,自己搞一个。

  function alertdiv(){
     var alertdiv = $(‘<div class="overlay" style="z-index: 99999; left: 0px;"><div class="phone-alert"><div class="phone-alert-panel"><div class="phone-alert-content">请填写正确的手机</div><div class="phone-alert-line"></div><a href="javascript:void(0);" class="pbtn" id="confirmTag">确认</a></div></div></div>‘);
     $("body").append(alertdiv);
     tap($("#confirmTag")[0], function() {
	$(".overlay").remove();
     });
 }

  至于样式大家自己设计一个套一下就可以了。

  效果图如下:

  大家设计css时注意设计弹窗下面的遮罩层,防止下面的页面被点击。

  然后这也不算插件啦,写得有所欠缺,还望海涵。

时间: 2024-10-23 14:27:53

自助移动端弹窗的相关文章

解决移动端弹窗滚动事件触发主页面滚动事件

原理:点击菜单弹出层的同时 body html禁止滚动  $('body,html').css({'height':'100%','overflow':'hidden'});          弹出层退出时释放body html 解除禁止滚动   $('body,html').removeAttr("style");

移动端弹窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例

<顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁. HTML5+css3+jQ+rem响应式+xwpop,其中xwpop是自己开发的一个移动端弹窗(9大自定义接口功能),app界面精美.代码优雅.               原文地址:https://www.cnblogs.com/xiaoyan2017/p/8608994.html

.net混淆、反编译工具调查

常用的工具列表[比较常见的] 混淆器.加密 Dotfuscator VS默认带的工具,不过是个社区版 强度不大 dotNET Reactor 使用了NativeCode 和混淆的形式 Xenocode Postbuild 专业工具 {smartassembly}.Setup.msi   反编译工具 Reflector 最富盛名的一个工具,很多插件都开源 Xenocode Fox 专业工具,商业版本 ildasm Vs带的工具 组件合并.虚拟工具:方便软件发布的工具,如合并多个dll文件等 Xen

移动端的弹窗

1.移动端的弹窗(用css控制) 2.html布局 3.需求,效果图 4.黑色背景,白色内容 5.html布局 背景:<div class="bg"></div> 内容:<div class="wrape_content"></div> 6.css样式 .bg{ position:fixed; height:100%; width:100% top:0; left:0; background:#000; z-index

ASP.NET服务端控制页面弹窗

在做图书馆管理系统的时候添加图书或者读者的时候,当添加成功了,要给用户一个反馈.就想到了添加成功就弹窗告诉读者添加成功.但是我们写的是服务端的代码,如何控制客户端弹窗呢?下面就要充分利用提高班的优势,搜索. 上网一搜,就会有一大堆这样的博客.我只用到了其中的两种,因为要经常用到,所以对他们进行了封装. 第一种,这种方式弹窗方式不会屏蔽掉页面,就是还可以看到页面后面的内容.这块用于对用户的反馈比较好. <span style="font-size:18px;"> /// &l

移动端重构系列11——弹窗modal

copy from http://www.w3cplus.com/mobile/mobile-terminal-refactoring-modal.html 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 设计结构如下: <header class="header"></header> <div class="wrap-page"> <section class="page"></sect

HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; } 但是到了移动端,如果写百分比布局的话,高度不好确定,所以弹窗居中就会变得困难,今天遇到这个问题,百度了一下,看到这位朋友的资料,(http://www.shejida

h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

html5开发的仿微博.微信聊天web端案例,h5仿微信聊天网页版,采用html5+css3+jquery+swiper+wcPop等技术进行布控架构开发,弹窗插件wcPop.js进行了一次全面api升级,修复编辑器插入表情时光标定位错误bug,新增了上传附件及自定义推送内容,另外也新增了个人名片.上传附件.分享等样式,功能上实现了消息.表情的发送,图片.视频全屏预览. 项目运行图: /* --- 用户设置.Start ---*/ // 联系人/群聊切换 $("body").on(&q