JS系统默认弹框样式修改

2018-08-21  本文已影响0人  wangjunmech

<style type="text/css">
       #msg{
        position: fixed;
        z-index:999;
        top: 50%;
        margin-top:-80px;
        left:50%;
        margin-left:-133px;
        width:30%;
        height:auto;
        background:#DBF992;/*主弹窗颜色*/
        box-shadow:5px 5px 8px #999;
        font-size:17px;
        color:#666;
        border:2px solid blue;
        text-align: center;
        line-height: 2rem;
        display:inline-block;
        padding-bottom:20px;
        border-radius:2px;

    }
    #msg_top{
        background:#54A7FF;/*弹窗头部背景颜色*/
        padding:5px 15px 5px 20px;
        text-align:left;
    }
    #msg_top span{
        font-size:44px;/*右上关闭X标记*/
        float:right;
        cursor:pointer;
    }
    #msg_cont{
        padding:20px 20px 20px;
        text-align:left;
    }
    #msg_clear{
        display:inline-block;
        color:red;/*确定按钮文本颜色*/
        padding:1px 15px;
        background:#FF6C00;/*确定按钮颜色*/
        border-radius:2px;
        float:right;
        margin-right:15px;
        cursor:pointer;
        width: 50%;
        line-height: 30px;
        font-size:22px;
    }
    #msg_clear:hover{
              background:#999;/*确定按钮颜色*/
    }
 
</style>
<script>
    function alert(e){
        $("body").append('<div id="msg"><div id="msg_top"><img src="http://wangjunmechdevise.blog.163.com/blog/animated_favicon.gif" alt="">&nbsp;<b>Prompt information</b> <span class="msg_close">×</span></div><div id="msg_cont">'+e+'</div><div class="msg_close" id="msg_clear">Confirm</div></div>');
        $(".msg_close").click(function (){
            $("#msg").remove();
        });
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读