Jquery打开和关闭模式对话框Asp.net脚本

我似乎无法用按钮关闭模式，网页加载并自动弹出带有覆盖层的模式。但是，我想用按钮打开模式，而不是在自动加载页面时

这是我的模式和打开与关闭按钮：

模式、覆盖和内容：

     <div id='overlay'>
       </div>
       <div id='modal'>
           <div id='content' style="background-color: #767A8F; font-family: Segoe UI; font-size: Medium; z-index: 1; left: 280px; top: 800px; position: fixed; height: 160px; width: 20px;">
               <br />
               <Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />
        </div> 

<asp:Button ID="close" class="close" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI;                                 margin-left: 0px; position: absolute; top: 418px; left: 5px; width: 64px; height: 44px; z-index: 1; margin-top: 0px; right: 112px;" Text="Cancel" />

<asp:Button class="open" ID="open" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative; top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information" />

<script src="js/jquery-ui-1.8.14.js" type="text/javascript"></script>




<script>

           var modal = (function () {
               var method = {},$overlay,$modal,$content,$close,$open;

               // Center the modal in the viewport
               method.center = function () {
                   var top, left;
                   top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                   left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
                   $modal.css({ top: top + $(window).scrollTop(), left: left });
               };


               // Open the modal
               method.open = function (settings) { };

               // Close the modal
               method.close = function () { };

               return method;
           } ());


           $overlay = $('<div id="overlay"></div>');
           $modal = $('<div id="modal"></div>');
           $content = $('<div id="content"></div>');
           $close = $('<a id="close" href="#">close</a>');
           $open = $('<a id="open" href="#">open</a>');

           $modal.hide();
           $overlay.hide();
           $modal.append($content, $close);

           $(document).ready(function () {
               $('body').append($overlay, $modal);
           });




           method.center = function () {
               var top, left;

               top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
               left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

               $modal.css({
                   top: top + $(window).scrollTop(),
                   left: left + $(window).scrollLeft()
               });
           };




           method.open = function (settings) {
               $content.empty().append(settings.content);

               $modal.css({
                   width: settings.width || 'auto',
                   height: settings.height || 'auto'
               })

               method.center();

               $(window).bind('resize.modal', method.center);

               $modal.show();
               $overlay.show();
           };


           method.close = function () {
               $modal.hide();
               $overlay.hide();
               $content.empty();
               $(window).unbind('resize.modal');
           };



           $open.click(function (e) {
               e.preventDefault();
               method.open();
           });


           $close.click(function (e) {
               e.preventDefault();
               method.close();
           });



           modal.open({ content: "Howdy" });

           modal.open({ content: "<p>Howdy</p>" });

           modal.open({ content: $("<p>Howdy</p>"), width: "500px", height: "200px" });

           // Ajax
           $.get('ajax.html', function (data) {
               modal.open({ content: data });
           });


       </script>

关闭按钮：

     <div id='overlay'>
       </div>
       <div id='modal'>
           <div id='content' style="background-color: #767A8F; font-family: Segoe UI; font-size: Medium; z-index: 1; left: 280px; top: 800px; position: fixed; height: 160px; width: 20px;">
               <br />
               <Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />
        </div> 

<asp:Button ID="close" class="close" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI;                                 margin-left: 0px; position: absolute; top: 418px; left: 5px; width: 64px; height: 44px; z-index: 1; margin-top: 0px; right: 112px;" Text="Cancel" />

<asp:Button class="open" ID="open" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative; top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information" />

<script src="js/jquery-ui-1.8.14.js" type="text/javascript"></script>




<script>

           var modal = (function () {
               var method = {},$overlay,$modal,$content,$close,$open;

               // Center the modal in the viewport
               method.center = function () {
                   var top, left;
                   top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                   left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
                   $modal.css({ top: top + $(window).scrollTop(), left: left });
               };


               // Open the modal
               method.open = function (settings) { };

               // Close the modal
               method.close = function () { };

               return method;
           } ());


           $overlay = $('<div id="overlay"></div>');
           $modal = $('<div id="modal"></div>');
           $content = $('<div id="content"></div>');
           $close = $('<a id="close" href="#">close</a>');
           $open = $('<a id="open" href="#">open</a>');

           $modal.hide();
           $overlay.hide();
           $modal.append($content, $close);

           $(document).ready(function () {
               $('body').append($overlay, $modal);
           });




           method.center = function () {
               var top, left;

               top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
               left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

               $modal.css({
                   top: top + $(window).scrollTop(),
                   left: left + $(window).scrollLeft()
               });
           };




           method.open = function (settings) {
               $content.empty().append(settings.content);

               $modal.css({
                   width: settings.width || 'auto',
                   height: settings.height || 'auto'
               })

               method.center();

               $(window).bind('resize.modal', method.center);

               $modal.show();
               $overlay.show();
           };


           method.close = function () {
               $modal.hide();
               $overlay.hide();
               $content.empty();
               $(window).unbind('resize.modal');
           };



           $open.click(function (e) {
               e.preventDefault();
               method.open();
           });


           $close.click(function (e) {
               e.preventDefault();
               method.close();
           });



           modal.open({ content: "Howdy" });

           modal.open({ content: "<p>Howdy</p>" });

           modal.open({ content: $("<p>Howdy</p>"), width: "500px", height: "200px" });

           // Ajax
           $.get('ajax.html', function (data) {
               modal.open({ content: data });
           });


       </script>

”）；
$open=$（''）；
$modal.hide（）；
$overlay.hide（）；
$modal.append（$content，$close）；
$（文档）.ready（函数（）{
$（'body'）。追加（$overlay，$modal）；
});
method.center=函数（）{
左上角；
top=Math.max（$（窗口）.height（）-$modal.outerHeight（），0）/2；
左=数学.max（$（窗口）.width（）-$modal.outerWidth（），0）/2；
$modal.css({
top:top+$（窗口）.scrollTop（），
左：左+$（窗口）。滚动左（）
});
};
method.open=函数（设置）{
$content.empty（）.append（settings.content）；
$modal.css({
宽度：settings.width | |“自动”，
高度：设置。高度| |“自动”
})
方法。中心（）；
$（window.bind（'resize.model'，method.center））；
$modal.show（）；
$overlay.show（）；
};
method.close=函数（）{
$modal.hide（）；
$overlay.hide（）；
$content.empty（）；
$（window.unbind（'resize.modal'）；
};
$open。单击（功能（e）{
e、 预防默认值（）；
方法open（）；
});
$close。单击（功能（e）{
e、 预防默认值（）；
方法close（）；
});
打开（{content:“Howdy”}）；
打开（{content:Howdy
“}）；
打开（{content:$（“Howdy
”），宽度：“500px”，高度：“200px”}）；
//阿贾克斯
$.get（'ajax.html'，函数（数据）{
打开（{content:data}）；
});

详细信息：将其添加到Jquery单击事件中。不要忘记添加e.preventDefault以停止页面回发，或者只使用HTML按钮

$('.Open').click(function (e) 
{
   var method = {},..... // Your normal code


   e.preventDefault(); 
}

可选：也许使用Jquery对话框并使其成为模态更适合您的需要。更多信息：