2014-03-19 476 views
0

我想要做的是當我點擊圖像按鈕時,彈出窗口必須出現在page.below代碼掩碼它,但不會創建一個彈出窗口。一個更多的問題我想把動態文本框和複選框按照從sql.shall存儲過程我寫表的記錄在一個隱藏的領域,我怎樣才能將其轉移到彈出窗口?感謝jquery動態彈出窗口

<script language="javascript" type="text/javascript"> 
      $(document).ready(function() { 
      $('.btncig').click(function (e) { 
      e.preventDefault(); 
      var id = $(this).attr('href'); 
      var maskHeight = $(document).height(); 
      var maskWidth = $(window).width(); 
      $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); 
      $('#mask').fadeIn(1000); 
      $('#mask').fadeTo("slow", 0.8); 
      var winH = $(window).height(); 
      var winW = $(window).width(); 
      $(id).css('top', winH/2 - $(id).height()/2); 
      $(id).css('left', winW/2 - $(id).width()/2); 
      $(id).fadeIn(2000); 

     }); 
     $('.window .close').click(function (e) { 
      e.preventDefault(); 
      $('#mask, .window').hide(); 
     }); 
     $('#mask').click(function() { 
      $(this).hide(); 
      $('.window').hide(); 
     }); 
    }); 

</script> 

<td> 
     <asp:ImageButton ID="Imagecig" class="btncig" runat="server" ImageUrl="~/Images/selection.png" style="margin-left:13px" OnclientClick=""/> 

CSS

#mask 
    { 
      position:absolute; 
      z-index:9000; 
      background-color:#000; 
      display:none; 
    } 


    #boxes .window 
     { 
     position:fixed; 
     width:440px; 
     height:200px; 
     display:none; 
      z-index:9999; 
     padding:20px; 
     } 


    #boxes #dialog 
    { 
     width:375px; 
     height:203px; 
    } 
+0

ü可能需要在ASP中的圖像添加標籤屬性clinetidmode =「靜態」 –

回答

0

你不說你正在使用彈出式窗口的庫。如果您在使用jQuery UI,那麼你的代碼應該是這樣的:

<script> 
    $(document).ready(function() { 
     $("#dialog").dialog({ // <-- Initialize your dialog/popup 
      autoOpen: false, 
      modal: true}); 

     $('.btncig').click(function (e) { 
     e.preventDefault(); 
     $("#dialog").dialog("open"); // <-- show your dialog/popup 
     }); 
    }); 
    </script> 

你還需要一些HTML把你的領域,你可以再次使用了一些方法來動態地創建內容,即AJAX調用等所以你的HTML應該是這個樣子

<div id="#dialog"> 
    <!-- Your dynamic content goes here --> 
</div> 

你需要確保在你的頁面,你既可以通過CDN或局部引用兩個jQuery和jQuery的庫。

我希望這有助於