上次写这个的时候的博客:http://hiuman.iteye.com/blog/2324929
上次是网上搜的,这次是自己写的。
无论多少个input都可以点击~但是只有一种内容(弹出的内容),可以修改,如果想要有多种内容需要改关联的弹出内容。
欢迎指点~
我导入的jquery是jQuery v1.9.1版本的。还加入了一个关闭的图片。
效果图:
(图片有点大。弹出的位置是正好正中间的。)
代码如下:
css:
input {
width: 100%;
height: 30px;
}
.fixed_bg {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
.fixed_bg .alert {
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
width: 250px;
height: 160px;
margin-top: -75px;
margin-left: -125px;
cursor: default;
border-radius: 10px;
background: #fafafa;
}
.fixed_bg .alert_title {
line-height: 40px;
position: relative;
width: 100%;
height: 40px;
text-align: center;
color: #fff;
background: #387bf0;
}
.fixed_bg .alert_title {
cursor: default;
}
.fixed_bg .alert_sure,
.fixed_bg .alert_close {
cursor: pointer;
}
.fixed_bg .alert_sure {
position: absolute;
right: 10px;
}
.fixed_bg .alert_close {
position: absolute;
left: 10px;
width: 20px;
height: 40px;
background: url('close.png') no-repeat center;
background-size: 20px;
}
.fixed_bg .alert_con {
position: relative;
width: 100%;
height: 120px;
}
.fixed_bg .alert_list_wrap {
position: absolute;
top: 8px;
left: 50%;
width: 40px;
height: 100px;
margin-left: -20px;
}
.fixed_bg .alert_list_msg {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.fixed_bg .alert_list_curr_top,
.fixed_bg .alert_list_curr_bottom {
position: absolute;
top: 33px;
width: 40px;
height: 2px;
background: red;
}
.fixed_bg .alert_list_curr_bottom {
top: 67px;
}
.fixed_bg .alert_list_msg_con {
position: absolute;
top: -68px;
width: 100%;
}
.fixed_bg .alert_list_msg_con a {
font-weight: bold;
line-height: 34px;
display: block;
width: 100%;
height: 34px;
text-align: center;
transition: top 2s;
-webkit-transition: top 2s;
/* Safari */
}
.fixed_bg .alert_list_msg_descr {
position: absolute;
top: 0;
left: -1px;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(245, 245, 245)), color-stop(.48, rgba(245, 245, 245, 0)), color-stop(.52, rgba(245, 245, 245, 0)), to(rgb(245, 245, 245)));
}
input {
margin-bottom: 10px;
}
js:
var content = ''
function setInputVal() {
var conTop = parseInt($('.fixed_bg .alert_list_msg_con').css('top')); // 34 0 -34
var temp = conTop - 68; // temp --> -34 -68 ...
var conIndex = -(temp / 34); // conIndex --> 1 2
$('#curr').text(Math.round(conIndex));
$('#curr').attr('data-msg', (68 - conIndex * 34)); // conTop
content = $($('.fixed_bg .alert_list_msg_con a')[Math.round(conIndex - 1)]).text();
}
setInputVal()
var oInputGroup = $('input.choose');
oInputGroup.each(function() {
oInputGroup.unbind('click').bind('click', function() {
var _this = this;
$('.fixed_bg').css('display', 'block');
eventListen()
$('.alert_close').unbind('click').bind('click', function() {
$('.fixed_bg').css('display', 'none')
setInputVal()
$(_this).val(content)
})
$('.alert_sure').unbind('click').bind('click', function() {
$('.fixed_bg').css('display', 'none')
setInputVal()
$(_this).val(content)
})
})
})
function eventListen() {
var aLength = $('.fixed_bg .alert_list_msg_con a').length;
var sign = '';
var sMoveStart = ''; //鼠标按下
$(window).on("mousedown", function(event) {
if (sign == "mouseup" || sign == '') {
sign = "mousedown";
sMoveStart = event.screenY;
$(window).mousemove(function(event) {
// top =(68-index*34)
if (sign == "mousedown") {
var currIndex = $('#curr').text();
var currTop = $('#curr').attr('data-msg');
sMoveLenth = event.screenY - sMoveStart;
// console.log(sMoveLenth);
var moveheight = Math.round(sMoveLenth / 34);
var temp = currTop - sMoveLenth;
var resultIndex = currIndex - moveheight;
if (resultIndex <= 0) {
currIndex = 1
currTop = 68 - (currIndex) * 34;
} else if (resultIndex >= aLength) {
currIndex = aLength
currTop = 68 - currIndex * 34;
} else {
currIndex -= moveheight
currTop = parseInt(currTop) + parseInt(sMoveLenth);
}
$('.alert_list_msg_con').css('top', currTop + 'px')
}
})
}
})
$(window).mouseup(function() {
if (sign == "mousedown") {
sign = "mouseup"
setInputVal()
var conIndex = $('#curr').text()
$('.alert_list_msg_con').css('top', (68 - conIndex * 34) + 'px')
}
})
}
html:
<body onselectstart="return false;" style="-moz-user-select:none;">
<input id="inputOne" class="choose" type="text" placeholder="请选择">
<input id="inputTwo" class="choose" type="text" placeholder="请选择">
<div class="fixed_bg">
<div class="alert">
<span id="curr" data-msg="" style="display: none;"></span>
<div class="alert_title"><span class="alert_close"></span>请选择<span class="alert_sure">确定</span></div>
<div class="alert_con">
<div class="alert_list_wrap">
<div class="alert_list_msg">
<div class="alert_list_msg_con">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
</div>
<div class="alert_list_msg_descr"></div>
</div>
<div class="alert_list_curr_top"></div>
<div class="alert_list_curr_bottom"></div>
</div>
</div>
</div>
</div>
</body>
- 大小: 7 KB
- 大小: 4.2 KB
- 大小: 1.9 KB
分享到:
相关推荐
uview2.0实现picker省市区选择以及默认选择
<title>Picker by ustbhuangyi , initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <h1 class="project-name">Picker <h2 class="project-tagline">h5 picker inspired by ios ...
uni-app picker选择器
daterangepicker,日期选择控件,3中选择 1.只到年月日,2.只要时分秒,3全要。 bootstrap2 和3 版本都有,看index.html 引入相应的js,css即可,再复制黏贴核心代码即可! 好用请评价哈
基于elementui2.15.8和vue2的el-data-picker季度区间选择器
NumberPicker制作省市选择器/时间选择器
picker-view时间选择器/年、月、日,闰年、天数、大月、小月 自定义picker-view年月日选择器 picker选择器picker-view选择器(案例)
用Data Time Picker实现日期的选择 用Data Time Picker实现日期的选择 用Data Time Picker实现日期的选择 用Data Time Picker实现日期的选择
city-picker 城市选择插件
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:...
Bootstrap+daterangepicker日期范围选择器 Bootstrap+daterangepicker日期范围选择器 Bootstrap+daterangepicker日期范围选择器
微信小程序 -- 年月日时分秒 picker 选择器 基于微信小程序封装 月日时分秒 picker 选择器 封装插件 全局引用
该资源为DevExpress 的(Image Picker)图标选择器的源代码及使用demo;由于自带的图标选择器无法在运行时调用,为此改写了自带的图标选择器,保持原有功能的同时更加完善操作(最大的亮点是可以提供自定义的图标...
使用uniapp制作微信小程序时候,需要一个城市选择框,但是微信中的弹框样式不可自定义,出现了与项目主题样式不一致问题,于是使用uniapp中picker-view封装底部选择弹框选择器,实现支持自定义确定和取消按钮颜色...
city-picker城市选择插件,亲测可用,具体可见官网http://tshi0912.github.io/city-picker/
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制,如果屏幕显示不全,顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
微信小程序picker组件,省市二级联动及其修改时进行回显,此文件只提供参考,希望给需要的朋友带来帮助。
微信小程序-自定义picker选择器wxminiprogram-picker-master.zip
imagepicker(图片选择器)
可以修改选中的字体的颜色、内容等,也可以修改选中的两条线的颜色,具体样式可以看这里:http://blog.csdn.net/the_path/article/details/38334899