Question

我有以下代码：

    <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。知道问题可能是什么吗？

Answer 1

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

请完美地看到这个......

Answer 2

在将表单呈现到页面之前调用脚本，因此它不起作用，因为$（“＃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>

Answer 3

将它包装在display：none div中，如果你不想显示它。它们提供了默认情况下只有页面上的对话框小部件的选项。你必须隐藏它自己才能显示它。

Answer 4

如果按钮的标识为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>

Answer 5

也许您的<script>标记之前 中的<div>。因此，当浏览器执行javascript时，<div>尚未创建且无法隐藏。您可以在<script>之后移动<div>部分，也可以这样写：

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

Jquery-UI模式表单无法正常工作

5 个答案: