javascript - 如何在 Bootstrap 模式的垂直顶部和水平中心显示图像加载器和消息？

Question

我正在为我的网站使用 Bootstrap v3.3.5。

我在 Bootstrap 模式对话框中添加了一个实体表单。当提交表单数据并从服务器收到响应时，我将显示一个图像加载器。该功能运行良好，但图像加载器没有出现在我想要显示它的 Bootstrap 模式的垂直顶部和水平中心。它显示在一个文本字段的后面。我尝试在 CSS 中进行更改，但无法寻求帮助。

下面是在Bootstrap模态对话框中开发的表单内部CSS和HTML。

  <style>#loader-icon {top: 50%;width:100%;height:100%;text-align:center;display:none;}</style>

<div style="display: block;" id="myModal-add-event" class="modal fade in" role="dialog">
  <div style="margin-top: 10px;" role="document" class="modal-dialog add-event">
    <div class="modal-content">
      <div class="modal-body">
      <h4 class="modal-title event-title">Add an Event</h4>
    <div style="display: none;" id="loader-icon"><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/processingbar_blue_diagonal_sm_ani.gif"></div>  
      <form method="post" action="http://localhost/CKWEB_28-12-2015/add_event.php" id="formAddEvent">

    <div class="form-group" id="addEventErrorMsg" style="color: rgb(255, 0, 0);"> Provide a name for this event<br>Provide a location for this event.<br></div>

        <div class="form-group">
        <input name="txt_event_title" id="txt_event_title" autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" type="text">
        </div>
        <div class="form-group">
        <textarea type="text" name="txt_event_description" id="txt_event_description" autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;"></textarea>
        </div>
    <table border="0" cellspacing="10">
      <tbody><tr>
    <th><span class="event-title1" style="margin-bottom:5px;">Start Date:</span></th>
    <th><span class="event-title1" style="margin-bottom:5px;">End Date:</span></th>
  </tr>
                <tr>
      <td>
                <div style="margin-right:15px;" class="form-inline form-group event-selection">
                        <div class="form-group has-feedback">
                                <div class="input-append date form_datetime" data-date="2013-02-21T15:25:00Z">
                                        <input id="event_start_date" name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" type="text">
                                        <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
                                </div>
                        </div>
                </div>
  </td>

                <td>
                <div class="form-inline form-group event-selection">
                        <div class="form-group has-feedback">
                                <div class="input-append date form_datetime" data-date="2013-02-21T15:25:00Z">
                                        <input id="event_end_date" name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" type="text">
                                        <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
                                </div>
                        </div>
                </div>
  </td>
  </tr>
  </tbody></table>  
        <!--<span class="event-title1" style="margin-bottom:5px;">Start Date:</span>
        <div class="form-inline form-group event-selection">
            <div class="form-group has-feedback">
                <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                    <input type='text' id='event_start_date' name="event_start_date" style="width:200px; display:inline; height:30px;" class="form-control" autocomplete="off" />
                    <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
                </div>  
            </div>        
        </div>

        <span class="event-title1" style="margin-bottom:5px;">End Date:</span>
        <div class="form-inline form-group event-selection">
            <div class="form-group has-feedback">
                <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                    <input type='text' id='event_end_date' name="event_end_date" style="width:200px; display:inline;height:30px;" class="form-control" autocomplete="off" />
                    <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
                </div>  
            </div>
        </div>-->
        <!--<div class="form-group">        
            <select id="event_time_zone" name="event_time_zone" class="form-control" style="width:225px;">
               <option value="">Select Timezone:</option>
               <option value="[UTC - 10 hours] HST">[UTC - 10 hours] Hawaii-Aleutian Standard Time (HST)</option>
               <option value="[UTC - 9 hours] AKST">[UTC - 9 hours] Alaskan Standard Time (AKST)</option>
               <option value="[UTC - 8 hours] PST">[UTC - 8 hours] Pacific Standard Time (PST)</option>
               <option value="[UTC - 7 hours] MST">[UTC - 7 hours] Mountain Standard Time (MST)</option>
               <option value="[UTC - 6 hours] CST">[UTC - 6 hours] Central Standard Time (CST)</option>
               <option value="[UTC - 5 hours] EST">[UTC - 5 hours] Eastern Standard Time (EST)</option>
            </select>
        </div>        -->
        <div class="form-group has-feedback">
        <input name="txt_event_location" id="txt_event_location" autocomplete="off" class="controls form-control custom-height" placeholder="Event Location" style="height:30px;" type="text">
        <span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"></span>       
        </div>      
        <div style="clear:both;"> </div>


        <div class="form-group">
        <input name="txt_event_room" id="txt_event_room" autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" type="text">
        </div>
        <div class="form-group">
            <div id="custom-templates">
              <span style="position: relative; display: inline-block;" class="twitter-typeahead"><input dir="ltr" tabindex="-1" spellcheck="false" autocomplete="off" readonly="" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" class="typeahead form-control custom-height tt-hint" type="text"><input style="position: relative; vertical-align: top; background-color: transparent;" dir="auto" spellcheck="false" autocomplete="off" class="typeahead form-control custom-height tt-input" id="selected_groupname" name="selected_groupname" placeholder="Invite Group" type="text"><pre style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Lato&quot;,sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;" aria-hidden="true"></pre><div style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;" class="tt-menu"><div class="tt-dataset tt-dataset-0"></div></div></span>
              <input name="selected_groupid" id="selected_groupid" value="        " type="hidden">
              <input name="hidden_selected_groupid" id="hidden_selected_groupid" value="        " type="hidden">
              <input name="hidden_selected_groupname" id="hidden_selected_groupname" value="        " type="text">
            </div>
        </div>        
        <div class="modal-footer text-center">
            <button class="btn btn-primary" id="btn_add_event" type="button">Add Event</button>
            <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
        </div>

       </form>
      </div>
    </div>    
    <!-- /.modal-content -->
  </div>
</div>

<div> ID loader-icon包含图像加载器。

要更好地了解当前显示的位置，请参阅下面的屏幕截图。

如果您需要，我还可以提供 jQuery AJAX 请求-响应代码。

我还想在该加载程序图像下方显示消息“正在创建您的事件...”

Answer 1

你希望装载机在哪里？

如果在顶部，则移除顶部:50%。

如果问题出在加载程序出现在文本字段后面，而您希望它出现在文本字段上方:那么添加一个 z-index。

请在下次发帖时删除代码中的评论。更好的是，如果可以的话，做一个 fiddle 。

您还对#loader-icon 应用了两次相同的样式