Popup Image when click on small image icon

.ASPX


 <div>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/5.JPG" Width="90px"
            Height="90px" OnClientClick="return LoadDiv(this.src);"/>
    </div>
    <div id="divBackground">
        <div id="divImage">
            <table>
                <tr>
                    <td>
                        <img id="imgLoader" runat="server" alt="" src="" style="width: 600px; height: 600px" />
                        <img id="imgFull" runat="server" alt="" src="" style="width: 600px; height: 600px" />
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="bottom">
                        <input id="btnClose" type="button" value="close" onclick="HideDiv()" />
                    </td>
                </tr>
            </table>
        </div>
    </div>


Javascript


 <script type="text/javascript">

        function LoadDiv(url) {

            var img = new Image();

            var bcgDiv = document.getElementById("divBackground");

            var imgDiv = document.getElementById("divImage");

            var imgFull = document.getElementById("imgFull");

            var imgLoader = document.getElementById("imgLoader");

            imgLoader.style.display = "block";

            img.onload = function () {

                imgFull.src = img.src;

                imgFull.style.display = "block";

                imgLoader.style.display = "none";

            };
            img.src = url;

            var width = document.body.clientWidth;

            if (document.body.clientHeight > document.body.scrollHeight) {

                bcgDiv.style.height = document.body.clientHeight + "px";

            }

            else {

                bcgDiv.style.height = document.body.scrollHeight + "px";

            }

            imgDiv.style.left = (width - 650) / 2 + "px";

            imgDiv.style.top = "20px";

            bcgDiv.style.width = "100%";



            bcgDiv.style.display = "block";

            imgDiv.style.display = "block";

            return false;

        }

        function HideDiv() {

            var bcgDiv = document.getElementById("divBackground");

            var imgDiv = document.getElementById("divImage");

            var imgFull = document.getElementById("imgFull");

            if (bcgDiv != null) {

                bcgDiv.style.display = "none";

                imgDiv.style.display = "none";

                imgFull.style.display = "none";

            }

        }
    </script>

.CSS

 #divImage
        {
            display: none;
            z-index: 1000;
            position: fixed;
            top: 0;
            left: 0;
            background-color: White;
            height: 550px;
            width: 600px;
            padding: 3px;
            border: solid 1px black;
        }

read more