Jquery-UI форма модальных не работает должным образом

У меня есть следующий код:Jquery-UI форма модальных не работает должным образом

<script type="text/javascript"> 
     $("#form_div").dialog({ 
      autoOpen: false, 
      height: 300, 
      width: 350, 
      modal: true 
     }); 
    </script> 
<div id="form_div" title="Trimite-ne un mesaj!"> 
    <form name="htmlform" method="post" action="html_form_send.php"> 
     <table width="450px"> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="first_name">Nume*</label> 
       </td> 
       <td valign="top"> 
        <input type="text" id="first_name" maxlength="50" size="30"> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="email">Email *</label> 
       </td> 
       <td valign="top"> 
        <input type="text" id="email" maxlength="80" size="30"> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="message">Mesaj: *</label> 
       </td> 
       <td valign="top"> 
        <textarea id="message" maxlength="1000" cols="25" rows="6"></textarea> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div>

Проблема заключается в том, что форма по-прежнему отображается при загрузке страницы вместо не прячась, пока кнопка нажата и отображается как модальный диалог. Я загрузил последние JQuery и JQuery-UI на моей странице. Любая идея, что может быть проблемой?

источник

2013-09-20 Bujanca Mihai

Переместите JavaScript в '$ (документ) .ready)' функции (и посмотреть, работает ли он тогда. – 1615903

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Dialog - Default functionality</title> 
<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
function OpenModal() 
{ 
$("#form_div").dialog(); 
$("#btnDisp").hide(); 
} 
</script> 
</head> 
<body> 

<div id="form_div" title="Trimite-ne un mesaj!" style="display:none;"> 
    <form name="htmlform" method="post" action="html_form_send.php"> 
     <table width="450px"> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="first_name">Nume*</label> 
       </td> 
       <td valign="top"> 
        <input type="text" id="first_name" maxlength="50" size="30"> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="email">Email *</label> 
       </td> 
       <td valign="top"> 
        <input type="text" id="email" maxlength="80" size="30"> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <label for="message">Mesaj: *</label> 
       </td> 
       <td valign="top"> 
        <textarea id="message" maxlength="1000" 
       cols="25" rows="6"></textarea> 
       </td> 
      </tr> 
     </table>   
    </form> 
    </div> 
    <input id="btnDisp" type="button" onclick="OpenModal();" 
value="display the form"/> 

</body> 
</html>

Пожалуйста, смотрите это прекрасно работает ...

источник

2013-09-20 07:02:17 Amit

Дорогой Буджанка! ваш код в порядке, но вы, должно быть, пропустили некоторые файлы, такие как jquery.ui.js или jqueryui.css. Пожалуйста, сравните свой код с моим и посмотрите различия ... Приветствия !!! – Amit

@ bujanca-mihai Не могли бы вы проглотить это, поскольку я нахожу, что он отлично работает ... – Amit

Да, это работает, спасибо. Я не знаю, почему мой код не работал, файлы были загружены. –

Просто оберните это на дисплее: none div, если вы не хотите, чтобы он отображался. Они предлагают возможность иметь только диалоговый виджет, который находится на странице по умолчанию. Вы должны скрыть свое собственное, чтобы он не появлялся.

источник

2013-09-20 06:27:34 jphase

пусть кнопка имеет идентификатор button, когда он нажмет он откроется диалоговое

<div id="form_div" title="Trimite-ne un mesaj!" style="display:none;"> 
... 
</div> 

<input type="button" id="button"/> 

<script type="text/javascript"> 
    $(document).on('click', '#button', function(){ $("#form_div").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true 
    });}); 
</script>

или если она будет открыта в то время как страница открыта

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#form_div").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 350, 
    modal: true 
    }); 
    }); 
    </script>

источник

2013-09-20 06:32:26

Может быть, ваш <script> тег приходит перед тем<div> в вашем html. Поэтому, когда браузер выполняет javascript, <div> еще не создан и не может быть скрыт. Либо вы перемещаете <script> часть после <div> или вы пишете так:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#form_div").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true 
    }); 
    }); 
</script>

источник

2013-09-20 06:35:54 jotaen

Скрипт вызывается перед тем, ваша форма оказывается на странице, поэтому он не работает, потому что $ («#form_div») не может найти элемент. Вы можете поместить свой скрипт в функцию $ (document) .ready() или после «#form_div».

<div id="form_div" title="Trimite-ne un mesaj!"> 
... 
</div> 
<script type="text/javascript"> 
    $("#form_div").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true 
    }); 
</script>

источник

2013-09-20 06:39:04

Jquery-UI форма модальных не работает должным образом

ответ

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