Search code examples
jqueryasp.netsimplemodal

Jquery plugin simplemodal not displaying properly?


I am using EricMarin's SimpleModal.I am not getting the modalpopup to be displayed correctly.I am new to use jquery plugins and could not find where i have gone wrong

Here's jquery scripts i was using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="../js/jquery.simplemodal.1.4.4.min.js"></script> 

Here's the css i've used

<link rel="stylesheet" href="../css/simplemodal.css" />

This is the simplemodal.css file

#simplemodal-container a.modalCloseImg {
background:url(/Images/x.png) no-repeat; /* adjust url as required */
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-15px;
right:-18px;
cursor:pointer;
}
[if lt IE 7]>
#simplemodal-container a.modalCloseImg {
    background:none;
    right:-14px;
    width:22px;
    height:26px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='Images/x.png', sizingMethod='scale'
    );
}

Here's the jquery function i have used to display modal popup

  <script type="text/javascript"> 
   $(function() {   

        $("#btnAdd").click(function(){                
            $("#tblSession").modal();
        });
   });
 </script>

Here's the table i have used to display modal popup

<table id="tblSession" style="width:100%">
<tr>
    <td>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </td>
</tr>
</table>

Solution

  • As far as your code provide, I think you should hide the table by adding .hide { display: none } class on it and then all you need to do is run the modal.

    Example here

    In addition, as @da_re said you should not add jQuery twice. Anyhow it is an old version and not available anymore.