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

如果您不想显示它，只需将其包装在 display:none div 中。他们提供了一个选项，即默认情况下只有一个对话框小部件位于页面上。您必须自己隐藏它才能使其不显示。

于 2013-09-20T06:27:34.813 回答
0

让按钮有一个ID 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

也许你的<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 回答