javascript - 即使未触发事件，jQuery UI 的对话框也是可见的

Question

我的网络应用程序页面上显示了这个完整日历:

当我单击特定日期时，我会使用 jQuery UI 插件获得一个弹出表单。

问题是，只有当我单击日期时才会弹出的表单在日历之后可见:

从逻辑上讲，它应该在弹出之前不可见。

这是我的 fullCalendar 和 jQuery UI 脚本:

$('#calendar').fullCalendar({
          dayClick: function(date, allDay, jsEvent, view) {
          //var title = prompt('Event Title:');
          if (allDay) {
            // Clicked on the entire day
            $('#calendar')
                .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
                .fullCalendar('gotoDate',
                    date.getFullYear(), date.getMonth(), date.getDate());
                    console.log($(this).data("date"));
                    $("#app_date").val($(this).data("date"));
                    $('#dialog').dialog({
                      autoOpen: false, 
                      hide: "puff",
                      show : "slide",
                      width: 800,
                      modal: true //,
                    });
                    $( "#dialog" ).dialog( "open" );
                    $("#add_app_btn").click(function()
                    {
//Some Variables used in the if condition
                      if((userTxt != "" && dateTxt != "" && select_old == 0) || (userTxt == "" && dateTxt != "" && select_old != 0))
                      {
                        $.ajax
                        ({
                          url: 'add_appoint.php',
                          type: 'POST',
                          data: {old_patient_id: select_old, patient_name: userTxt, app_date: dateTxt, app_time: timeTxt, app_reason: reasonTxt, dob: dobTxt, phone: phoneTxt, address: addressTxt},
                          dataType: 'text',

                          success:function(res)
                          {
                              alert("Appointment Added");
                              $( "#dialog" ).dialog( "close" );
                          },
                          error:function(res)
                          {
                              console.log(res);
                          }
                        });
                      }
                      }
                    });
                  }
          },

这是我的 div，其中包含以下形式:

  <div class="box" id="dialog" title="Add New Appointment">
              <form class="form-horizontal" id="add_app_form">
                <table class="table table-striped table-hover" style="width:650px;">
                  <tr><th><label for="patient_name" style="text-align:left;width:150px">Old Patient</label></th>
                    <td><select id="select_old" name="select_old" style="width:185px" class="control-label pull-left">
                      <option value="0">Choose Name</option>
                      <?php foreach($name_array as $na) { ?>
                      <option value="<?php echo $na['id'] ?>"><?php echo $na['patient_name'] ?></option>
                      <?php } ?>
                    </select></td>
                  <th><label for="patient_name" style="text-align:left;width:150px">Or New Patient</label></th>
                    <td><input type="text" id="patient_name" style="text-align:left;width:150px" name="patient_name" placeholder="New Patient Name"></td></tr>
                  <tr><th><label for="app_date" style="text-align:left;width:150px">Date</label></th>
                    <td><input type="date" id="app_date" name="app_date"></td></tr>
                  <tr><th><label for="app_time" style="text-align:left;width:150px">Time</label></th>
                    <td><input type="time" id="app_time" name="app_time" style="text-align:left;width:185px"></td></tr>
                  <tr><th><label for="app_reason" style="text-align:left;width:150px">Reason of Visit</label></th>
                    <td><textarea class="form-control" id="app_reason" name="app_reason" placeholder="Reason"></textarea></td></tr>
                <tr><td colspan="3"><button type="button" id="add_app_btn" class="btn btn-info pull-right">Add Appointment</button></td></tr>
                <table>
            </form>

Answer 1

在加载页面时将 autoOpen 设置为 false:

$(function() {
    $("#dialog").dialog({ autoOpen: false});
});

或者将对话框的style设置为display:none参见here一个工作示例:

<div class="box" id="dialog" title="Add New Appointment" style="display:none">