2017-6-4 jQuery弹窗制作封装成js文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="tc.js"></script>
    <title></title>
    <style type="text/css">
       
         
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input  type="button" value="弹出" id="btn1" 
            
/>
    <%--<div id="tc" style="position:fixed;
            width:400px;
            left:50%;
            margin-left:-200px;
            top:-500px;
            border:1px solid navy;
            box-shadow:0 0 10px #808080;
            border-radius:10px 11px;
            z-index:11;">
    <div id="tc-top" style=" width:100%;
            height:30px;
            background-color:navy;
            color:white;
            font-size:18px;
            font-weight:bold;
            text-align:center;
            line-height:30px;
             border-radius:10px 11px;">这里是标题</div>
          <div id="tc-main" style=" padding:20px;
            text-align:center;
            background-color:white;">这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！</div>
          <div id="tc-bottom" style="position:relative;
            width:100%;
            height:40px;">
              <div  onclick="tcbtn1();" id="tc-btn1" style=" position:absolute;
            width:100px;
            height:30px;
            top:5px;
            background-color:navy;
            color:white;
            text-align:center;
            line-height:30px;
            cursor:pointer;
            left:50%;
            margin-left:-50px;font-weight:bold;">确定</div>
          </div>
    </div>

        <div id="tc-zz" style=" position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background-color:black;
            opacity:0.3;
            display:none;
            z-index:10;"></div>--%>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        myalert('我是小倩','小倩：你好！！');
    });
   

</script>

function myalert(t, c)
{
    var tcstr = " <div id=\"tc\" style=\"position:fixed; width:400px; left:50%;margin-left:-200px;top:-500px; border:1px solid navy;box-shadow:0 0 10px #808080;border-radius:10px 11px; z-index:11;\">";
    tcstr +=" <div id=\"tc-top\" style=\" width:100%;height:30px; background-color:navy;color:white; font-size:18px; font-weight:bold;text-align:center;line-height:30px; border-radius:10px 11px;\">";
    tcstr +=t; //这里是标题
    tcstr +="</div><div id=\"tc-main\" style=\" padding:20px;text-align:center;background-color:white;\">";
    tcstr +=c;
    tcstr +=" </div><div id=\"tc-bottom\" style=\"position:relative;width:100%; height:40px;\">";
    tcstr +=" <div  onclick=\"tcbtn1();\" id=\"tc-btn1\" style=\" position:absolute; width:100px; height:30px; top:5px;background-color:navy;color:white; text-align:center;line-height:30px;cursor:pointer;left:50%; margin-left:-50px;font-weight:bold;\"> 确定</div></div></div>";
    tcstr +="<div id=\"tc-zz\" style=\" position:fixed;top:0px;left:0px;width:100%;height:100%; background-color:black;opacity:0.3; display:none; z-index:10;\"></div>";
    $(document.body).append(tcstr);
    $("#tc-top").text(t);
    $("#tc-main").html(c);
    $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 300);
    $("#tc-zz").css("display", "block");
}
function tcbtn1()
{
   
    $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
        $("#tc-zz").css("display", "none"); $("#tc").remove();
        $("#tc-zz").remove();
    });
       
}

posted on 2017-06-07 09:38 口袋里的SKY 阅读(149) 评论(0) 编辑收藏举报