jquery 弹出层

 
//var resizeTimer = null;

//防止window.resize重复
//var resetStyle = function () {
//    if (resizeTimer) clearTimeout(resizeTimer);
//    resizeTimer = setTimeout("pagestyle()", 300);
//}


///设置遮盖层的高度
//var pagestyle = function () {

//    var bH = $(document).height();
//    var bW = $(document).width();
//    $("div_overlay").css({ width: bW, height: bH });
//}


function NumObj() {

    NumObj.Add();
}

NumObj.Add = function () {
    NumObj.id++;
    NumObj.index = NumObj.index + 2;
}
NumObj.id = 1;
NumObj.index = 998;


///显示弹出层
function Show(content, options) {

    var defaults = {
        title: '标题',  // 标题文本，若不想显示title请通过CSS设置其display为none 
        width: '400px',
        height: '280px'

    };

    NumObj();
    var id_div_overlay;
    var id_div_drag;
    id_div_overlay = "div_overlay_" + NumObj.id;
    id_div_drag = "div_drag_" + NumObj.id;
    id_close = "close_" + NumObj.id;
    var options = $.extend(defaults, options);
    var div_overlay = $("<div class=\"div_overlay\" id=\"" + id_div_overlay + "\"> </div>");
    div_overlay.css("z-index", NumObj.index);
    $("body").prepend(div_overlay);

    var div_drag = $("<div class=\"div_drag\" id=\"" + id_div_drag + "\"></div>");

    var div_bar = $("<div class=\"bar\"><span class=\"title\">" + options.title + "</span> <a  id=\"" + id_close + "\" class=\"close\" >[关闭]</a> </div>");

    var div_content = $("<div class=\"content\"></div>");

    div_drag.append(div_bar).append(div_content);
    div_content.html(content);
    div_drag.css({ "height": options.height, "width": options.width, "z-index": NumObj.index + 1 });
    $("body").prepend(div_drag);
    $(".content").height($("#" + id_div_drag).height() - $(".bar").height());
    var bH = $(document).height();
    var bW = $(document).width();
    $("#" + id_div_drag).css("left", (($(document).width()) / 2 - (parseInt($("#" + id_div_drag).width()) / 2)) + "px")
            .css("top", (($(document).height()) / 2 - (parseInt($("#" + id_div_drag).height()) / 2)) + "px"); 

    $("#" + id_close).bind("click", function () {

        $("#" +id_div_overlay).remove();
        $("#" + id_div_drag).remove();
    });

    //移动事件
    div_bar.mousedown(function (e)//e鼠标事件  
    {

       
        $(this).css("cursor", "move"); //改变鼠标指针的形状  

        var offset = $(this).offset(); //DIV在页面的位置  
        var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离  
        var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离  
        $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件  
        {
            $("#" + id_div_drag).stop(); //加上这个之后  

            var _x = ev.pageX - x; //获得X轴方向移动的值  
            var _y = ev.pageY - y; //获得Y轴方向移动的值  

            $("#" + id_div_drag).animate({ left: _x + "px", top: _y + "px" }, 10);
        });

    });

    $(document).mouseup(function () {
        $(".bar").css("cursor", "default");
        $(this).unbind("mousemove");
    })
    ///
}

@{
    ViewBag.Title = "Grid";
}
@section Head{


    <script type="text/javascript" src="@Url.Content("~/Scripts/myMsgBox.js")"></script>
    <style type="text/css">
        .table
        {
            border-collapse: collapse;
            border-top: 1px solid #DDD;
            border-left: 1px solid #DDD;
            font-size: 13px;
            height: 24px;
            line-height: 24px;
            color: #000;
            text-align: center;
        }
        
        .table tr th
        {
            border-right: 1px solid #CCC;
            border-bottom: 1px solid #CCC;
            font-size: 13px;
            height: 24px;
            line-height: 24px;
        }
        
        .table tr td
        {
            border-right: 1px solid #CCC;
            border-bottom: 1px solid #CCC;
        } 
        
        body, html
        {
            font-family: Calibri;
            font-size: 12px;
            line-height: 18px;
        }
        .div_drag
        {
            background-color: #F0FBEB;
            border: 1px solid #9BDF70;
            display: block;
            
            position: absolute;
            
        }
        .bar
        {
            background: none repeat scroll 0 0 #9BDF70;
            color: #FFFFFF;
            cursor: move;
            height: 30px;
            width: 100%;
        }
        .div_overlay
        {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5; 
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }
        .bar .title
        {
            float: left;
        }
        .bar A
        {
            cursor: pointer;
            text-decoration: none;
            float: right;
        }
        .content
        {
            
            width: 100%; 
            overflow:auto;
            background: none repeat scroll 0 0 #FFFFFF;
        }
    </style>
    <script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
}
@model MvcApplication.Models.PageTableModels
<h2>@ViewBag.Date_Time</h2>
@{ 
    string html_Table = "<Table class=\"table\" width=\"100%\"cellspacing= 1 align=\"center\">";
    html_Table += "<tr><th>测试1</th><th>测试2</th><th>测试3</th></tr>";
    foreach (System.Data.DataRow row in Model.dataTable.Rows)
    {
        html_Table += "<tr><td>" + row[0] + "</td><td>" + row[1] + "</td><td>" + row[2] + "</td></tr>";

    }
    html_Table += "</Table>";
}
 
<div>@Html.Raw(html_Table)</div>
@Html.ActionLink("首页", "Grid", new { id = 1 })
@Html.ActionLink("下页", "Grid", new { id = Model.PageIndex + 1 < Model.PageCount ? Model.PageIndex + 1 : Model.PageCount })
@Html.ActionLink("上页", "Grid", new { id = Model.PageIndex - 1 > 1 ? Model.PageIndex - 1 : 1 })
@Html.ActionLink("末页", "Grid", new { id = Model.PageCount })
<input id="Button1" type="button" value="button"   />

     
    <select id="Select1">
        <option  >测试1</option>
        <option  >测试2</option>
        <option  >测试3</option>
    </select>
@section Script
{
    <script type="text/javascript">

        function Test() {
            Show(" <table><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /></td> </tr>  <tr>  <td> 测试2  </td> <td> <input id=\"txt_2\" type=\"text\" /> </td></tr><tr>  <td>  测试1  </td> <td>  <input id=\"txt_1\" type=\"text\" />  </td> </tr><tr><td>  测试3  </td> <td>  <input id=\"btn_Test\" value=\"弹出\" type=\"button\" onclick=\"Test();\" /> </td></tr> </table>", { title: '测试标题' });
             }
//             <input id="Button1" type="button" value="button" onclick="Test();" />
        $(function () {
            $("#Button1").click(function () {

                Show(" <table><tr> <td> 测试1 </td> <td> <input id=\"txt_1\" type=\"text\" /></td> </tr>  <tr>  <td> 测试2  </td> <td> <input id=\"txt_2\" type=\"text\" /> </td></tr><tr>  <td>  测试1  </td> <td>  <input id=\"txt_1\" type=\"text\" />  </td> </tr><tr><td>  测试3  </td> <td>  <input id=\"btn_Test\" type=\"button\" value=\"弹出\"  onclick=\"Test();\" /> </td></tr> </table>", { title: '测试标题' });
            });
         

        })
       
        
    </script>
}