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

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

首先是弹出选择器的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; 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 >

要注意上面文本框的ID和传递给点击事件的参数要一致，且与js中设置选择器数组中的元素对应。

效果