时间:2021-05-26
本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件。分享给大家供大家参考。具体如下:
完整实例代码点击此处本站下载。
用法
<input type="button" id="btn_dialog" value="打开浮层"/><div id="dialog-content" style="display:none;">这是内容</div><script src="../src/jquery-1.9.1.min.js"></script><script src="../src/dialog.js"></script><script> var dialog = new Dialog(); dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'});</script>或者用jquery方式调用:
<input type="button" id="btn_dialogjquery" value="jq打开浮层"/><div id="dialog-contentjq" style="display:none;">这是内容22</div><script src="../src/dialog-jquery.js"></script><script> $('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'})</script>继承类alert和confirm提示(jquery模式下):
html:
js:
属性或方法:
属性:
trigger:
触发对象
target:
弹出内容,可以为#id,或者jquery对象
mask:
是否有遮罩层
title:
标题
zIndex:
z-index
closeTpl:
关闭html(默认:<span class="ui-dialog-close js-dialog-close">x</span>)
titleTpl:
标题html(默认:<div class="ui-dialog-title"></div>)
方法及回调:
show:
显示弹层
hide:
隐藏
beforeShow:function(content)
显示前的方法回调,content是浮层内容对象
beforeHide:function(content)
隐藏前的方法回调,content是浮层内容对象
setPosition:function()
设置位置居中
希望本文所述对大家的javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
运行效果图:----------------------查看效果-----------------------小提示:浏览器中如果不能正常运行,可以尝试切换浏览
手机是没有兼容性模式的,因为兼容性模式是针对pc端的网页和浏览器一种模式。所谓兼容性模式是pc端的一些浏览器可能存在双核的浏览器,一个是webkit内核一个ie
网站链接:http://strml.net/作者:SamuelReed小提示:经过昨天在朋友圈测试,发现直接在微信自带浏览器中访问该站点会闪屏,并且有些安卓手机
//父页面小小提示层父页面$(function(){$("#parentIframe").click(function(){vara=$(this).attr(
向上滑动隐藏底部悬浮框,向下滑动显示悬浮框。使用pc端浏览器查看请把浏览器设置为手机浏览器模式。手机端触屏手指滑动方向varcurrntY=0;varlastY