Jquery打開和關閉模態對話框Asp.net腳本

我似乎無法關閉模式的按鈕，網頁加載並自動彈出模式與overlay.however，我想打開模式使用按鈕不是當它會自動加載頁面。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" />

和JavaScript代碼：

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

來源

2012-10-30 FBEvo1

詳情：它添加在一個jQuery click事件。不要忘記添加e.preventDefault來停止頁面回發，否則只需使用HTML按鈕。

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


    e.preventDefault(); 
}

可選：也許使用jQuery的對話框，並使用了模式將更好地滿足您的需求。更多信息：Jquery Dialog

來源

2012-10-30 06:49:10 MVCKarl

Jquery打開和關閉模態對話框Asp.net腳本

回答

相關問題