移动端-自定义弹出选择器

移动端-自定义弹出选择器

首先是弹出选择器的js

/* 触发弹出选择事件 */
function show_change_box(name){
// 设置选择器数组
var title = {
company : '選擇船務公司',
start_addr : '出發地點選擇',
end_addr : '到達地點選擇',
};

var option = {
company : [ '金光飛航', '噴射飛航' ],
start_addr : [ '（九龍）中港城碼頭', '香港（上環德信中心）' ],
end_addr : [ '澳門氹仔（氹仔客運碼頭）' ],
};

// 调用弹出选择器
popup_change_box(name, title, option);

}

/* 弹出选择器 */
function popup_change_box(name, title, option){
if ( name != '' && name != null ) {
var html = '<div class="et_popup_change_bg" onClick="$(\'.et_popup_change_bg, .et_popup_change_box\').remove()"></div>'+
'<div class="et_popup_change_box" >'+
'<div class="et_popup_change_box_msg"></div>'+
'</div>';
$('.et_popup_change_bg, .et_popup_change_box').remove();
$('body').prepend(html);

// 匹配弹出选择器的值
$('.et_popup_change_box_msg').append( '<h1>'+title[name]+'</h1>' );
$.each( option[name], function(i,val){
$('.et_popup_change_box_msg').append( '<p>'+val+'</p>' );
});

// 为各个选项绑定点击事件
$('.et_popup_change_box_msg').find('p').on('click', function(){
$('#'+name).val( $(this).text() );
$('.et_popup_change_bg, .et_popup_change_box').remove();
});

// 如果已经选择，则将标记弹出框中被选择的选项
var change_val = $('#'+name).val();
if ( change_val != '' && change_val != null ) {
$('.et_popup_change_box_msg').find('p').each(function() {
if ( $(this).text() == change_val ) {
$(this).text( change_val + ' √' ).css({'color':'#4162ff'});
}
});
}

var _widht = document.documentElement.clientWidth;  //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高
/*var _widht = parent.$('.et_popup_change_bg').width();       //阴影层的宽
var _height = parent.$('.et_popup_change_bg').height();       //阴影层的宽*/
var boxWidth = parent.$(".et_popup_change_box").width();
var boxHeight = parent.$(".et_popup_change_box").height();

// 让弹出选择器居中
$(".et_popup_change_box").css({ "top": (_height - boxHeight) / 2 + "px", "left": (_widht - boxWidth) / 2 + "px" });
}
}

然后就是弹出选择器的css样式

.et_popup_change_bg { background-color:#000;width:100%; height:100%; z-index:99999; position:fixed;top: 0; left: 0; filter: Alpha(opacity=60); opacity: 0.6 }
.et_popup_change_box { position:fixed; z-index: 999999; background-color:#fff; width:80%; max-width:300px;
4000
max-height:300px; overflow:auto; }
.et_popup_change_box_msg { text-align:center; font-size:16px; padding:10px; padding-bottom:0; }
.et_popup_change_box_msg h1 { font-size:20px; border-bottom:1px solid #ddd; padding-bottom:15px; margin:0; }
.et_popup_change_box_msg p { border-bottom:1px solid #eee; padding:10px 0; margin:0; color:#666; }
.et_popup_change_box_msg p:last-child { border-bottom:0; }
.et_popup_change_box_msg p:hover { color:#4162ff; cursor:default; }

最后是页面的调用

<input type="text" id="company" onClick="show_change_box('company')" readonly >
<input type="text" id="start_addr" onClick="show_change_box('start_addr')" readonly >
<input type="text" id="end_addr" onClick="show_change_box('end_addr')" readonly >