2013-03-11 3 views
0

Я использую EricMarin в SimpleModal .Я не получают modalpopup, которое будет отображаться correctly.I новичок использовать JQuery плагинов и не мог найти, где я пошло не такJQuery плагин simplemodal не отображается правильно?

Вот JQuery скрипты я использовал

<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> 

Вот CSS я использовал

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

Это файл simplemodal.css

#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' 
    ); 
} 

Вот функция JQuery я использовал для отображения модального Popup

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

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

Вот таблицы я использовал для отображения модального 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> 
+0

Просто из любопытства, почему бы не использовать 'jQuery-ui' http://jqueryui.com/dialog/#modal –

+0

Удалить' ... src = "http://code.jquery.com/jquery -1.10.1.js "> ...'. Вы пытаетесь использовать 2 разных версии jQuery. – Eich

+0

Один из них jqueryui, а другой - jquery.Are они такие же? Они используются в [jquery tabs] (http://jqueryui.com/tabs/). Извините, если я ошибаюсь – Kannan

ответ

0

Насколько ОБЕСПЕЧИТЬ ваш код, Я думаю, вы должны скрыть таблицу, добавив на нее класс .hide { display: none }, а затем все, что вам нужно сделать, это запустить модальный.

Example here

Кроме того, как @da_re сказал, что вы не должны добавлять JQuery дважды. Так или иначе, это старая версия и больше не доступна.

+0

Спасибо большое за ваш ответ. – Kannan

+0

Я рад, что смог помочь :) – agriboz

Смежные вопросы