jquery练习9 弹出层样式设置(TBC)

来源：互联网发布：java.util.base64 编辑：程序博客网时间：2024/06/05 16:03

原题及原生js解法

弹出层样式很多,选择了两个比较常见的弹出层样式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />    <script src="http://code.jquery.com/jquery-1.8.3.js">    </script>    <script type="text/javascript">    function alert(e) {        $("body").append("<div id='msg'><span>" + e + "</span></div>");        var t = setTimeout(function() {            $("#msg").remove();        }, 2000);    }    function alert2(e) {        $("#overlay,#msgBox").css("display", "block");        $("#textArea").text(e);    }    $(document).ready(function() {        $("#btn1").click(function() {            alert("显示内容,因为用了span所以不能换行");        });        $("#btn2").click(function() {            alert2("这是第二种弹出框样式,内容内容内容内容内容内容内容内容内容内容内容");        });        $("#close").click(function() {            $("#overlay,#msgBox").css("display","none");        });    });    </script>    <style type="text/css">    #msg {        height: 2rem;        text-align: center;        position: fixed;        top: 50%;        margin-top: -1rem;        line-height: 2rem;        width: 100%;    }    #msg span {        color: #fff;        background: rgba(0, 0, 0, 0.6);        height: 2rem;        display: inline-block;        padding: 0 3rem;        border-radius: 5px;    }    #overlay {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        background: black;        opacity: 0.5;        filter: alpha(opacity=50);        display: none;    }    #msgBox {        position: absolute;        top: 50%;        left: 50%;/*居中位置*/        width: 400px;        height: 200px;        background: white;        border: 4px solid orange;        margin: -102px 0 0 -202px;        display: none;        box-shadow:  0 0 5px 2px #FFCC00;    }    #msgBox h1 {        text-align: right;/*靠右放span*/        font-size: 12px;/*和span close等高,垂直居中*/        background: #FFCC00;        border-bottom: 3px solid orange;/*底部类似msgBox的边框线*/margin: 0;        padding-right:5px;/*span不完全贴边*/    }    #close {        color: orange;        cursor: pointer;/*鼠标样式变化*/        background: white;        border: 1px solid orange;        padding: 1px;    }    #msgBox strong {        float: left;        margin-left: 10px;        color:black;    }    #textArea{    text-align: center;    /*vertical-align: middle;*/    margin: 0 auto;    line-height: 180px;    /*几乎等高,文字垂直居中*/    }    </style>    <title>        2.4 弹出层样式    </title></head><body>    <div class="wrapper">        <button type="button" id="btn1">无交互,无遮罩层</button>        <button type="button" id="btn2">右上角关闭,有遮罩层</button>        <div id="overlay" class="hidden"></div>        <div id="msgBox" class="hidden">            <h1><span id="close"><strong>消息框</strong>×</span></h1><div id="textArea"></div>        </div>    </div></body></html>

第一个的演示效果为:

第二个的演示效果为

可以观察到的是,如果textArea中的文字过多,就无法正常显示,因为为了使提示信息居中用了text-align:center; 以及把textArea的line-height设置为区域等高的方法

目前没有太好的方法让它多行居中显示,改过之后比较好的显示效果有:

这是将textArea的text-align和line-height都取消设置的效果;

或者是:

这是只取消line-height的效果

肯定有更好的显示方法,等待后续改进

阅读全文

0 0