searched online last time, and this time I wrote it myself.
No matter how many inputs you can click ~ but there is only one content (pop-up content) that can be modified. If you want to have multiple content, you need to change the associated pop-up content.
Welcome to give pointers ~
the jquery I imported is the jQuery v1.9.1 version. A closed image was also added.
Effect picture:
(The picture is a bit big. The pop-up position is right in the middle.) The
code is as follows:
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 = ''; //mouse pressed $(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>