弹出窗口中的显示gridview [英] dispaly gridview in pop up window

问题描述

我想使用jQuery在弹出窗口中显示gridview控件。请帮我。我不想要jQuery UI答案。谢谢

I want to display gridview control in pop up window using jQuery. Please help me. I don't want jQuery UI answers. Thanks

推荐答案

试试这个

Try this

<div>
     <asp:button id="btn_open" runat="server" text="Show Gridview" cssclass="openModal" xmlns:asp="#unknown" />
    <div class="modal">
    <div class="modal-header">
        <h3>Student Details <a class="close-modal" href="#">×</a></h3>
    </div>
    <div class="modal-body">
         <uc2:tabemployee id="Mine" runat="server" xmlns:uc2="#unknown"></uc2:tabemployee>
       
    </div>
    <div class="modal-footer">
         <asp:button id="btn_close" runat="server" text="OK" cssclass="modalOK close-modal" xmlns:asp="#unknown" />
    </div>
</div>
<div class="modal-backdrop"></div>
      
    </div>

.modal-backdrop {
           background-color: rgba(0, 0, 0, 0.61);
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           display: none;
       }
       .modal {
           width: 500px;
           position: absolute;
           top: 25%;
           z-index: 1020;
           background-color: #FFF;
           border-radius: 6px;
           display: none;
       }
       .modal-header {
           background-color: #333;
           color: #FFF;
           border-top-right-radius: 5px;
           border-top-left-radius: 5px;
       }
       .modal-header h3 {
           margin: 0;
           padding: 0 10px 0 10px;
           line-height: 40px;
       }
       .modal-header h3 .close-modal {
           float: right;
           text-decoration: none;
           color: #FFF;
       }
       .modal-footer {
           background-color: #F1F1F1;
           padding: 0 10px 0 10px;
           line-height: 40px;
           text-align: right;
           border-bottom-right-radius: 5px;
           border-bottom-left-radius: 5px;
           border-top: solid 1px #CCC;
       }
       .modal-body {
           padding: 10px 10px 10px 10px;
       }

（ function （）{
modalPosition（）;

(function () { modalPosition();

（ window ）。resize（ function （）{
modalPosition（）;
}）;

(window).resize(function () { modalPosition(); });

这篇关于弹出窗口中的显示gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！