Jquery--弹窗

Posted 2020-08-16 yp秋水伊人

<title>弹窗</title>

    <script src="JS/jquery-1.7.2.js"></script>
    <style type="text/css">
        #tanchuang {
        position:fixed;/*固定住窗口*/
        top:100px;
        width:30%;
        height:300px;
       top:-1000px;
        left:35%;
        overflow:hidden;
        z-index:100001;/*弹窗比遮罩要高*/
        }
        #tc_top {
        position:relative;
        width:100%;
        height:40px;
        background-color:#0026ff;
        color:white;
        text-align:center;
        line-height:40px;
        }
        #tc_main {
        position:relative;
        width:100%;
        height:220px;
        background-color:#0ff;
        
        }
        #tc_maintext {
        position:relative;
        width:70%;
        height:80%;
        left:15%;
        top:10%;
   background-color:orange;
  text-align:center;
        }
        #tc_bottom {
         position:relative;
        width:100%;
        height:40px;
        background-color:#0026ff;
        }
        #tc_btnok {
        position:relative;
        width:30%;
        height:30px;
        background-color:#808080;
        left:35%;
        top:5px;
        text-align:center;
        color:white;
        line-height:30px;
        cursor:pointer;
        }
        #zhezhao {
        position:fixed;
        width:100%;
        height:100%;
        background-color:black;
        z-index:100000;
        opacity:0.4;
        display:none;
        }
    </style>

View Code

 <input  type="text" id="biaoti"/><br />
        <input  type="text" id="neirong"/>
        <!--弹窗开始-->
        <div id="zhezhao"></div>
   <div id="tanchuang">
       <div id="tc_top"></div>
       <div id="tc_main">
           <div id="tc_maintext"></div>
       </div>
       <div id="tc_bottom">
           <div id="tc_btnok">确定</div>
       </div>
   </div>
        <input type="button" value="弹窗"id="tc" />
         <!--弹窗结束-->
    </form>
</body>
</html>
<script src="JS/tanchuang.js"></script>
<script type="text/javascript">
    $("#tc").click(function () {
        tc("标题","内容");
    });
    
</script>

function tc(a, b) {//做成方法，可调用
    $("#zhezhao").show();
    $("#tanchuang").animate({ top: "100" }, 500).animate({ top: "90" }, 200).animate({ top: "100" }, 200);
    $("#tc_top").text(a);
    $("#tc_maintext").text(b);
};
$("#tc_btnok").click(function () {
    $("#tanchuang").animate({ top: "-2000" }, 500, function () {
        $("#zhezhao").hide();
    });//点击确定弹走
});