Create Modal Popup Image In Asp.Net Using Jquery Bootstrap

Create Modal Popup Image In Asp.Net

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><style type="text/css">  .modal {            display: none;            position: relative;            top: 50%;            left: 50%;            -webkit-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);            z-index: 100;            opacity: 0.8;            filter: alpha(opacity=0);            -moz-opacity: 0.8;            min-height: 100%;        }        #divImage {            display: none;            z-index: 1000;            position: fixed;            top: 30%;            left: 50%;            -webkit-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);                        width: auto;            height: 50%;            padding: 3px;            border: solid 1px white;        }</style>
<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;        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>

Struktur HTML Using Repeater,Image button and bootstrap.

<asp:Repeater ID="Repeater1" runat="server">    <ItemTemplate>   <div class="col-sm-6">    <div class="panel panel-green">  <div class="panel-body">      <asp:ImageButton ID="ImageButton1" runat="server" CssClass="img-responsive" alt="NitipLapak" width="300" height="200" ImageUrl ='<%# "~/"+ Eval("FilePath") %>' OnClientClick="return LoadDiv(this.src);"  />  </div>   </div>  </div>     </ItemTemplate>    </asp:Repeater>  

create html popup below html structure

<div class="row"> <div class="col-md-12 table-responsive"><div class="row"><div class="col-md-6"><div id="divBackground" class="modal"></div><div id="divImage" class="img-responsive"><img id="imgLoader" alt="" src="img/loadingAnim.gif" /><input id="btnClose" type="button" value="close" onclick="HideDiv()" class="btn btn-danger btn-sm btn-block" /><img id="imgFull" alt="" src="" style="display: none;" class="img-responsive"/></div></div></div></div></div>

 Code > <img id="imgLoader" alt="" src="img/loadingAnim.gif" /> 

Sekian..Thank..Happy Coding.