美文网首页
JS系统默认弹框样式修改

JS系统默认弹框样式修改

作者: wangjunmech | 来源:发表于2018-08-21 10:35 被阅读0次
    
    <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>
    

    相关文章

      网友评论

          本文标题:JS系统默认弹框样式修改

          本文链接:https://www.haomeiwen.com/subject/txediftx.html