0

次のコードがあります。

    <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 をロードしました。何が問題なのかわかりますか？

4

5 に答える 5

5 
<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-20T07:02:17.433 に答える
1

スクリプトはフォームがページにレンダリングされる前に呼び出されるため、 $( "#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-20T06:39:04.010 に答える
0

ボタン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-20T06:32:26.507 に答える
0

表示したくない場合は、これを display:none div でラップするだけです。デフォルトでページ上にあるダイアログ ウィジェットのみを使用するオプションを提供します。表示されないようにするには、自分で非表示にする必要があります。

于 2013-09-20T06:27:34.813 に答える
0

タグ<script>がHTMLの の前にある可能性があります。<div>そのため、ブラウザが 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-20T06:35:54.473 に答える