当前位置： >
手机移动端评分和分享弹出框
　来源/作者：懒人图库　分类：　
手机移动端评分和分享弹出框
手机移动端登录，评分，分享，页面模式弹出框代码，支持iOS，Android（暂不支持WP）等系统以webkit为内核的浏览器，建议在PC端使用以webkit为内核的浏览器（如：Google Chrome）中缩小浏览器窗口宽度查看效果，PC端查看效果需要用鼠标按住导航拖动以模拟手机上手指拖动的效果。使用方法：1.head区域引用样式文件reset.css ，dialog.css，dialog.default.css，dialog_demo.css，button.css，button.default.css2.head区域引用JS文件zepto.js，zepto.extend.js，zepto.ui.js，zepto.highlight.js，dialog.js，button.js3.在你的文件中加入&!-- 代码 开始 --&&!-- 代码 结束 --&区域代码4.本代码中两种导航效果均需引用所有CSS,JS文件，如需修改样式，可去掉default相关样式文件
　新手使用求助QQ群：
猜你也喜欢看这些 ??????
这些是最新的 ??????
我们一直在进步输入关键字或相关内容进行搜索
直接生成一个空的项目，里面放一个index.html,只放入下面一个下拉框标签，云端打包，手机端安装后，点击一下直接就退出了，选择的框都没出来。&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&initial-scale=1.0, maximum-scale=1.0, user-scalable=no& /&
&title&hello world&/title&
&script type=&text/javascript&&
function helloworld(){
alert(&hello world!&)
document.addEventListener('plusready', function(){
&select name=&& onchange=&alert(this.value)&&
&option value=&阿迪发生地&&阿迪发生地&/option&
&option value=&5345&/option&
&option value=&梵蒂冈地方官梵蒂冈&&梵蒂冈地方官梵蒂冈&/option&
要回复问题请先或
关注: 1 人(引用)解决弹出层无法遮盖select的问题 - Robin99 - 博客园
本篇文章并没有为系列文中构造的轻量级脚本库添加新的方法, 而是改进了原有弹出浮动层的方法. 对方法中获取位置的函数重构出来, 为弹出层自动添加iframe遮盖层以实现IE6下遮住&Select&控件. 又放在此系列文章中也是对自己学习过程的一次记录.
二.关于弹出层无法遮盖select的问题
在IE6下存在一个Bug: 如果弹出层是一个div, 并且在弹出层下方有一个&select&下拉框控件, 则div无论z-index值如何设置都无法遮盖select控件.如图:
目前有两种解决办法:
1.当弹出层出现时隐藏select控件.
个人认为此方法的效果欠佳, 并且没有通用性.
2.在弹出层下添加一个一个iframe
因为在IE6中认为select控件认为是窗口级元素. 所以可以使用同样是窗口级元素的iframe来遮盖住Select控件, 注意需要将iframe的zIndex值设置为大于select控件.
关于添加iframe的方式有很多种.比如在弹出层里面添加一个宽度为div宽+div边框宽的iframe(为了遮盖弹出层边框), 或者在页面上添加一个透明的iframe并控制firame与弹出层的同步显示等.
三.改进版ScriptHelper实现方法
因为我们构建的是通用的轻量级脚本库, 所以我不希望为了使用脚本库还需要在页面上添加特别的iframe元素.而且也不希望在所有的弹出层上都添加一个iframe元素, 因为会增加弹出层的代码.于是通过改进弹出图层showDivCommon和关闭图层closeDivCommon这两个方法实现了动态添加iframe和隐藏iframe.
1.为每个弹出层动态的在Body元素上添加一个div, div中包含一个iframe元素. 当弹出层显示时设置iframe的位置和长宽与弹出层相同, zIndex值为弹出层-1, 关闭时弹出层时也隐藏iframe.
2.iframe和iframe的容器div在第一次弹出时创建, 以后再弹出和关闭不会重新创建.
3.每一个弹出层都会有一个对应的iframe, 以满足一个页面同时弹出多个弹出层的需求
修改后的showDivCommon和closeDivCommon方法://
显示图层,再次调用则隐藏
: 要弹出图层的事件源
: 要显示的图层ID
: 手工向下移动的偏移量.不移动则为0(默认).
: 手工向左移动的距离.不移动则为0(默认).
用法与测试:
&div&&a href="#" onclick="ScriptHelperV2.showDivCommon(this,'testDiv', 20, 20)"&事件源&/a&&/div&
scriptHelperV2.prototype.showDivCommon = function(sObj, divId, moveTop, moveLeft) {
//取消冒泡事件
if (typeof (window) != 'undefined' && window != null && window.event != null) {
window.event.cancelBubble = true;
else if (ScriptHelperV2.showDivCommon.caller.arguments[0] != null) {
ScriptHelperV2.showDivCommon.caller.arguments[0].cancelBubble = true;
//参数检测.如果没有传入参数则设置默认值
if (moveLeft == null) {
moveLeft = 0;
if (moveTop == null) {
moveTop = 0;
var divObj = document.getElementById(divId); //获得弹出图层对象
var sObjOffsetTop = 0;
//事件源的垂直距离
var sObjOffsetLeft = 0;
//事件源的水平距离
var position = this.getPosition(sObj); //获取事件源对象的偏移量
var myClient = this.getClient();
//获取屏幕大小
var myScroll = this.getScroll();
//获取滚动条滚动的举例
var sWidth = sObj.offsetWidth != null ? parseInt(sObj.offsetWidth) : 0;
//事件源对象的宽度
var sHeight = sObj.offsetHeight != null ? parseInt(sObj.offsetHeight) : 20; //事件源对象的高度
var popDivWidth = 0;
//弹出层的宽度
var popDivHeight = 0;
//弹出层的高度
var bottomS
//距离底部的距离
var iframeDivId = "tempIframeDiv" + divId;
//iframe所在div的id
var iframeId = "tempIframe" + divId;
//iframe的id
var iframeDiv = document.getElementById(iframeDivId); //iframe所在div对象
var iframe = document.getElementById(iframeId); //iframe对象
if (divObj.style.display.toLowerCase() != "none") {
//隐藏图层
divObj.style.display = "none";
//隐藏iframe
if (iframe != null) {
iframe.style.display = "none";
if (iframeDiv != null) {
iframeDiv.style.display = "none";
if (sObj == null) {
alert("事件源对象为null");
return false;
//先显示图层,才能获取到弹出层的长宽
divObj.style.display = "block";
popDivWidth = divObj.offsetWidth != null ? parseInt(sObj.offsetWidth) : 0;
//弹出层宽度
popDivHeight = divObj.offsetHeight != null ? parseInt(divObj.offsetHeight) : 0;
//弹出层高度
/* 获取距离底部的距离 */
bottomSpace = parseInt(myClient.clientHeight) - (parseInt(position.OffsetTop) - parseInt(myScroll.scrollTop)) - parseInt(sHeight);
/* 设置图层显示位置 */
//如果事件源下方空间不足且上方控件足够容纳弹出层,则在上方显示.否则在下方显示
if (popDivHeight & 0 && bottomSpace & popDivHeight && position.OffsetTop & popDivHeight) {
divObj.style.top = (parseInt(position.OffsetTop) - parseInt(popDivHeight)).toString() + "px";
divObj.style.top = (parseInt(position.OffsetTop) + parseInt(sHeight)).toString() + "px";
divObj.style.left = (parseInt(position.OffsetLeft) - parseInt(moveLeft)).toString() + "px";
//如果遮盖iframe层不存在则创建
if (iframe == null) {
//ie6下使用dom添加节点后无法控制某些属性, 所以将iframe放在一个div中,这样才可以用写html的方式添加.
var tempIframeDiv = document.createElement("div");
tempIframeDiv.setAttribute("id", iframeDivId);
document.body.appendChild(tempIframeDiv);
var iframeString = "&iframe id=\"" + iframeId + "\" style=\"position: display: border-width:0\"&&/iframe&";
tempIframeDiv.innerHTML = iframeS
iframe = document.getElementById(iframeId);
iframeDiv = document.getElementById(iframeDivId);
//使用遮盖层遮住select控件
if (iframe != null && iframeDiv != null) {
iframeDiv.style.display = "block";
iframe.style.top = divObj.style.
iframe.style.left = divObj.style.
iframe.style.width = divObj.offsetWidth.toString() + "px";
iframe.style.height = divObj.offsetHeight.toString() + "px";
iframe.style.display = "block";
iframe.style.zIndex = divObj.style.zIndex - 1;
: 要隐藏的图层ID
用法与测试:
ScriptHelperV2.closeDivCommon('testDiv');
scriptHelperV2.prototype.closeDivCommon = function(divId) {
var iframeDivId = "tempIframeDiv" + divId;
//iframe所在div的id
var iframeId = "tempIframe" + divId;
//iframe的id
var divObj = document.getElementById(divId); //获得图层对象
if (divObj != null) {
divObj.style.display = "none";
var iframe = document.getElementById(iframeId);
if (iframe != null) {
iframe.style.display = "none";
var iframeDiv = document.getElementById(iframeDivId);
if (iframeDiv != null) {
iframe.style.display = "none";
四. 其他改进
和本系列文章第一版本的方法比较,& showDivCommon方法还做了如下改进:
1. 将计算坐标的方法抽象出来://获取对象相对于Body对象的偏移量坐标.需要在Body元素加上position:relative, 并且保证任何父级元素都没有position:relative
: 要弹出图层的事件源
用法与测试:
var sObj = document.getElementById("divId");
var position = ScriptHelperV2.getPosition(sObj);
var sObjOffsetTop = parseInt(
position.OffsetTop );
var sObjOffsetLeft = parseInt( position.OffsetLeft );
scriptHelperV2.prototype.getPosition = function(sObj) {
var sObjOffsetTop = 0;
//事件源的垂直距离
var sObjOffsetLeft = 0;
//事件源的水平距离
/* 获取事件源对象的偏移量 */
var tempObj = sO //用于计算事件源坐标的临时对象
while (tempObj && tempObj.tagName.toUpperCase() != "BODY") {
sObjOffsetTop += tempObj.offsetT
sObjOffsetLeft += tempObj.offsetL
tempObj = tempObj.offsetP
tempObj = null;
return { OffsetTop: sObjOffsetTop, OffsetLeft: sObjOffsetLeft };
2.由于经验浅薄, 原以为获取不到对象的高度和宽度,& 经过学习发现可以使用OffsetWidth和OffsetHeight获取. 所以进一步规范了showDivCommon的参数.现在只传入两个参数使用时的坐标计算更加正确: &a class="cursorHand" onclick="ScriptHelperV2.showDivCommon(this,'subMenu1');"&Menu1&/a&
原ScriptHelper实现效果:
新ScriptHelperV2实现效果:注意已经遮盖住了select控件
实例代码:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" &
&title&ScriptHelper 类测试页面 - ShowDivComon 显示弹出层方法&/title&
&!--&script src="/zhangziqiu/ScriptHelper.js" type="text/javascript"&&/script&--&
&script src="/zhangziqiu/ScriptHelperV2.js" type="text/javascript"&&/script&
&style type="text/css"&
.cursorHand { cursor:}
style="position:"&
&div style="height:300"&&/div&
&!-- Main Menu --&
&a class="cursorHand" onclick="ScriptHelperV2.showDivCommon(this,'subMenu1');"&Menu1&/a&
&select id="Select1" style="z-index:1;"&
&option&123&/option&
&option&456&/option&
&!-- Sub Menu 1 --&
&div id="subMenu1" style="position: display: background-color:#D7EFCD; border:solid 1px #000000; margin:0 padding:5 width:200z-index:100;"&
&div&SubMent-1&/div&
&div&SubMent-2&/div&
&div&SubMent-3&/div&
&div&SubMent-4&/div&
&div&SubMent-5&/div&
&div&SubMent-6&/div&
六.打包下载地址
javascript文件下载地址:
七.相关经验和技巧
一个li对象的width设置为100px或者li的容器ul的width为100px, 在firefox下, li的offsetWidth永远为100, 超出的内容部分不会自动撑开li, 即使设置了overflow:visible仍然只是在li外部显示超出内容. 解决办法是可以li内再增加一个span对象放置内容文字, 这时获取span的offsetWidth为内容的长度而不是li的长度.使用document.createElement方法创建的对象,在IE6下虽然可以获取到对象, 但是无法再设置他的宽度和高度. 也就是说createElement在IE和FF下均可用, 但是要想动态创建一个标签并且设置他的宽高,比如一个&iframe&, 可以使用写入HTML代码的方式,写入后可以获取对象并设置他的宽度和高度.一个div,里面有一个iframe, 关闭时一定要先关闭iframe再关闭div, 否则在ie6中iframe会无法关闭.
<span style="display: none" id="span_isdigged_
(请您对文章做出评价)使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
作者：在路上
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办的相关资料,需要的朋友可以参考下
相关阅读：
&&&&& 正当开心地收拾东西准备下班的时候，测试部的姑娘跑过来提了一个bug: “在iphone下，点击下拉框出现页面乱跳转现象，安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急，小编只能乖乖留下解决问题。再次测试之后，小编逐一排查了可能性原因(正式版和测试版代码不一致，页面HTML代码错乱，css代码错误)，但都未能解决问题。一个简单的select，怎么就出现问题了呢&#63;百思不得其解。（至今也没有找到问题根源）
&&&&& 找不出问题根源，只能先看看有没有解决方案。经过多次调试，捕获select动作，找到了一个解决方案。原理很简单：利用div来模拟select。
&&&&& 思路也是比较清晰的。页面中有两个html结构，一是select代码照常写（一开始处于隐藏状态display:none），二是被模拟的div(一开始处于显示状态)，当点击div时出现select下拉框，同时将读取的option值给被模拟的div，其模拟核心代码可下载VisualSelect.js
&div class=”visualSelect” &商行&/div&
&select class=”round” style=”display:”&
&option value=”1”&国股&/option&
&option value=”2”&商行&/option&
&option value=”3”&其他&/option&
.round { border-radius: 4}
.visualSelect {
width: 100%;
padding: .45rem .5rem .25rem .75
margin-bottom: .875
border: 1px solid #
border-radius: 4
注：由于该问题只存在于部分iphone，android手机并没有问题，因此最好判断机型。
var agent = navigator.userA
if ( agent.indexOf(“iPhone”) & -1) {
$(“select”).VisualSelect(); //调用插件即可
PS：bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有
bootstrap写了一个affix的附加导航(导航条在左边，数据在右边，分成的两列)，在安卓手机的微信内置浏览器上滚动监听是正常的，但是在iPhone微信的内置浏览器上有时可以监听有时不能监听，这是什么原因？
解决方案：
出现这个原因是用HTML5写的网页，iPhone没有及时响应导致的，最好用jQuery mobile。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具input，select等点击出现框
输入框，留言框等在有些浏览器中，点击后经常出现一个框
这种情况可以定义
input, select{
&&& outline:
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}