Click here to Skip to main content
15,898,010 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I want to display gridview control in pop up window using jQuery. Please help me. I don't want jQuery UI answers. Thanks
Posted
Comments
Thanks7872 25-Mar-15 1:26am    
What have you tried so far? Where is the code? Did you try google?

1 solution

Try this
ASP.NET
<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>


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


JavaScript
$(function () {
            modalPosition();
            $(window).resize(function () {
                modalPosition();
            });
            $('.openModal').click(function (e) {
                $('.modal, .modal-backdrop').fadeIn('fast');
                e.preventDefault();
            });
            $('.close-modal').click(function (e) {
                $('.modal, .modal-backdrop').fadeOut('fast');
            });
        });
        function modalPosition() {
            var width = $('.modal').width();
            var pageWidth = $(window).width();
            var x = (pageWidth / 2) - (width / 2);
            $('.modal').css({ left: x + "px" });
        }


Refer:- Display gridview in modal pop up
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900