首页 > 其他 > 详细

弹出框之对话框和提示框,可共用代码

时间:2019-02-26 16:10:51      阅读:189      评论:0      收藏:0      [点我收藏+]

弹出框:

//对话框,title是标题文字,content是提示框内容,test是一个function(点击确定按钮触发的事件)
function dialogBox(title,content,test){
    //生成Html
    var _html = "";
    _html += ‘<div id="db_box"></div><div id="db_con"><span id="db_tit">‘ + title + ‘</span><a id="db_ico">x</a>‘;
    _html += ‘<div id="db_msg"><div id="db_img"></div><div id="db_word"><p id="db_p1">‘ + content + ‘</p><p id="db_p2">如果是请点击“确定”,否则点“取消”</p></div></div>‘;
    _html += ‘<div id="db_btnbox"><input id="db_btn_ok" type="button" value="确定" />‘;
    _html += ‘<input id="db_btn_no" type="button" value="取消" />‘;
    _html += ‘</div></div>‘;
    //必须先将_html添加到body,再设置Css样式
    $("body").append(_html);
    //生成Css
    $("#db_box").css({
        width: ‘100%‘,
        height: ‘100%‘,
        zIndex: ‘99999‘,
        position: ‘fixed‘,
        filter: ‘Alpha(opacity=60)‘,
        backgroundColor: ‘black‘,
        top: ‘0‘,
        left: ‘0‘,
        opacity: ‘0‘
    });
    $("#db_con").css({
        zIndex: ‘999999‘,
        width: ‘400px‘,
        position: ‘fixed‘,
        backgroundColor: ‘White‘,
        borderRadius: ‘5px‘,
        boxShadow: ‘0px 5px 10px #888888‘,
    });
    $("#db_tit").css({
        display: ‘block‘,
        fontSize: ‘14px‘,
        color: ‘#FFFFFF‘,
        padding: ‘10px 15px‘,
        backgroundColor: ‘#0e8bc5‘,
        borderRadius: ‘5px 5px 0 0‘,
        fontWeight: ‘bold‘
    });
    $("#db_msg").css({
        height: ‘115px‘,
        display: ‘flex‘,
    });
    $("#db_ico").css({
        display: ‘block‘,
        position: ‘absolute‘,
        right: ‘10px‘,
        top: ‘9px‘,
        width: ‘20px‘,
        height: ‘20px‘,
        textAlign: ‘center‘,
        lineHeight: ‘16px‘,
        cursor: ‘pointer‘,
        borderRadius: ‘12px‘,
        fontFamily: ‘微软雅黑‘,
        color: ‘#FFFFFF‘,
        textDecoration: ‘none‘,
        fontSize: ‘18px‘,
    });
    $("#db_img").css({
        float: ‘left‘,
        width: ‘80px‘,
        height: ‘78px‘,
        margin: ‘25px 20px 25px 38px‘,
        background: ‘url(../resource/img/right.png) no-repeat‘,
    });
    $("#db_word").css({
        float: ‘left‘,
        display: ‘table-cell‘,
        verticalAlign: ‘middle‘,
        height: ‘100px‘,
    });
    $("#db_p1").css({
        margin: ‘40px 0 10px 0‘,
        fontSize: ‘18px‘,
    });
    $("#db_p2").css({
        color: ‘#8f8f8f‘,
        fontSize: ‘13px‘,
    });
    $("#db_btnbox").css({
        height: ‘85px‘,
        textAlign: ‘end‘
    });
    $("#db_btn_ok,#db_btn_no").css({
        width: ‘100px‘,
        height: ‘30px‘,
        color: ‘white‘,
        border: ‘none‘,
        borderRadius: ‘3px‘,
        cursor: ‘pointer‘,
    });
    $("#db_btn_ok").css({
        backgroundColor: ‘#168bbb‘
    });
    $("#db_btn_no").css({
        backgroundColor: ‘gray‘,
        marginLeft: ‘5px‘,
        marginRight: ‘55px‘,
    });
    //右上角关闭按钮hover样式
    $("#db_ico").hover(function() {
        $(this).css({
            backgroundColor: ‘Red‘,
            color: ‘White‘
        });
    }, function() {
        $(this).css({
            backgroundColor: ‘rgb(14, 139, 197)‘,
            color: ‘#FFFFFF‘
        });
    });
    var _widht = document.documentElement.clientWidth; //屏幕宽
    var _height = document.documentElement.clientHeight; //屏幕高
    var boxWidth = $("#db_con").width();
    var boxHeight = $("#db_con").height();
    //让提示框居中
    $("#db_con").css({
        top: (_height - boxHeight) / 2 + "px",
        left: (_widht - boxWidth) / 2 + "px"
    });
    //确定按钮事件
    $("#db_btn_ok").click(function() {
        $("#db_box,#db_con").remove();
        if (typeof(test) == ‘function‘) {
            test();
        }
    });
    //取消按钮事件
    $("#db_btn_no,#db_ico").click(function() {
        $("#db_box,#db_con").remove();
    });
}

 

对话框:

//提示框,title是标题文字,content是提示框内容
function promptBox(title,content){
    //生成Html
    var _html = "";
    _html += ‘<div id="pb_box"></div><div id="pb_con"><span id="pb_tit">‘ + title + ‘</span>‘;
    _html += ‘<a id="pb_ico">x</a><div id="pb_msg"><span>‘ + content + ‘</span></div></div>‘;
    //必须先将_html添加到body,再设置Css样式
    $("body").append(_html);
    //生成Css
    $("#pb_box").css({
        width: ‘100%‘,
        height: ‘100%‘,
        zIndex: ‘99999‘,
        position: ‘fixed‘,
        filter: ‘Alpha(opacity=60)‘,
        backgroundColor: ‘black‘,
        top: ‘0‘,
        left: ‘0‘,
        opacity: ‘0‘
    });
    $("#pb_con").css({
        zIndex: ‘999999‘,
        width: ‘400px‘,
        position: ‘fixed‘,
        backgroundColor: ‘White‘,
        borderRadius: ‘5px‘,
        boxShadow: ‘0px 5px 10px #888888‘,
    });
    $("#pb_tit").css({
        display: ‘block‘,
        fontSize: ‘14px‘,
        color: ‘#FFFFFF‘,
        padding: ‘10px 15px‘,
        backgroundColor: ‘#0e8bc5‘,
        borderRadius: ‘5px 5px 0 0‘,
        fontWeight: ‘bold‘
    });
    $("#pb_msg").css({
        padding: ‘20px‘,
        fontSize: ‘18px‘,
        display: ‘flex‘,
        height: ‘160px‘,
    });
    $("#pb_msg span").css({
        margin: ‘auto‘,
    });
    $("#pb_ico").css({
        display: ‘block‘,
        position: ‘absolute‘,
        right: ‘10px‘,
        top: ‘9px‘,
        width: ‘20px‘,
        height: ‘20px‘,
        textAlign: ‘center‘,
        lineHeight: ‘16px‘,
        cursor: ‘pointer‘,
        borderRadius: ‘12px‘,
        fontFamily: ‘微软雅黑‘,
        color: ‘#FFFFFF‘,
        textDecoration: ‘none‘,
        fontSize: ‘18px‘,
    });
    //右上角关闭按钮hover样式
    $("#pb_ico").hover(function() {
        $(this).css({
            backgroundColor: ‘Red‘,
            color: ‘White‘
        });
    }, function() {
        $(this).css({
            backgroundColor: ‘rgb(14, 139, 197)‘,
            color: ‘#FFFFFF‘
        });
    });
    var _widht = document.documentElement.clientWidth; //屏幕宽
    var _height = document.documentElement.clientHeight; //屏幕高
    var boxWidth = $("#pb_con").width();
    var boxHeight = $("#pb_con").height();
    //让提示框居中
    $("#pb_con").css({
        top: (_height - boxHeight) / 2 + "px",
        left: (_widht - boxWidth) / 2 + "px"
    });
    //取消按钮事件
    $("#pb_ico").click(function() {
        $("#pb_box,#pb_con").remove();
    });
}

 

弹出框之对话框和提示框,可共用代码

原文:https://www.cnblogs.com/XUYIYUAN/p/10437956.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!