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

我认为您应该在$(document).ready(function(){...})

中执行此操作

$('#dialog').dialog({
    autoOpen: false, 
    hide: "puff",
    show : "slide",
    width: 800,
    modal: true //,
});

Answer 2

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

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

或者将对话框的style设置为display:none，请参阅here以获取有效示例：

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

即使没有触发事件，jQuery UI的对话框也是可见的

2 个答案: