Jquery动态弹出窗口

本文关键字:窗口 动态 Jquery | 更新日期: 2023-09-27 17:50:58

我想做的是当我点击图像按钮时,一个弹出窗口必须出现在页面的中心。下面的代码掩码它,但不创建一个弹出窗口。还有一个问题,我想把动态文本框和复选框根据存储过程从sql。我应该写表记录在一个隐藏的领域,我怎么能把它转移到弹出窗口?由于

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

Jquery动态弹出窗口

你没有说你正在为你的弹出使用哪个库。如果你使用的是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库。

希望对大家有所帮助