码迷,mamicode.com
首页 > Web开发 > 详细

Jquery弹窗

时间:2016-11-07 10:13:35      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:title   click   hidden   jquery   遮罩   ext   script   htm   top   

<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>

  

<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();
    });//点击确定弹走
});

  

Jquery弹窗

标签:title   click   hidden   jquery   遮罩   ext   script   htm   top   

原文地址:http://www.cnblogs.com/shi2172843/p/6037467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!