如何在引导程序模式的垂直顶部和水平中心显示图像加载器以及消息？

Question

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

我在引导模式对话框中有一个添加实体形式。 提交表单数据并从服务器收到响应时，我正在显示一个图像加载器。 该功能运行正常，但图像加载器未出现在我想显示的引导模态的垂直顶部和水平中心。 它显示在一个文本字段的后面。 我尝试在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>

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

为了更好地了解当前显示的位置，请参见以下屏幕截图。

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

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

Answer 1

您希望装载机在哪里？

如果在顶部，则取下顶部：50％。

如果问题出在加载程序出现在文本字段的后面，并且您希望它出现在该字段的上方，则添加z-index。

而且，下次您发布时，请从代码中删除注释。 更好的是，如果可以的话，摆弄小提琴。

另外，您两次将相同的样式应用于＃loader-icon