zoukankan      html  css  js  c++  java
  • Jquery--弹窗

    <title>弹窗</title>
    
        <script src="JS/jquery-1.7.2.js"></script>
        <style type="text/css">
            #tanchuang {
            position:fixed;/*固定住窗口*/
            top:100px;
            30%;
            height:300px;
           top:-1000px;
            left:35%;
            overflow:hidden;
            z-index:100001;/*弹窗比遮罩要高*/
            }
            #tc_top {
            position:relative;
            100%;
            height:40px;
            background-color:#0026ff;
            color:white;
            text-align:center;
            line-height:40px;
            }
            #tc_main {
            position:relative;
            100%;
            height:220px;
            background-color:#0ff;
            
            }
            #tc_maintext {
            position:relative;
            70%;
            height:80%;
            left:15%;
            top:10%;
       background-color:orange;
      text-align:center;
            }
            #tc_bottom {
             position:relative;
            100%;
            height:40px;
            background-color:#0026ff;
            }
            #tc_btnok {
            position:relative;
            30%;
            height:30px;
            background-color:#808080;
            left:35%;
            top:5px;
            text-align:center;
            color:white;
            line-height:30px;
            cursor:pointer;
            }
            #zhezhao {
            position:fixed;
            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();
        });//点击确定弹走
    });
  • 相关阅读:
    每日日报2021 3/14
    每日日报2021 3/13
    每日日报2021 3/12
    每日日报2021 3/11
    每日日报2021 3/10
    每日日报2021 3/9
    1678. Goal Parser Interpretation
    1694. Reformat Phone Number
    Amicable Pair (相亲数)
    454. 4Sum II
  • 原文地址:https://www.cnblogs.com/yp11/p/5985322.html
Copyright © 2011-2022 走看看