How to display image-loader along with message at vertically top and horizontally center of bootstrap modal?

Question

I'm using Bootstrap v3.3.5 for my website.

I've one add entity form in bootstrap modal dialog. When the form data is being submitted and response is received from the server I'm showing one image loader. The functionality is working fine but the image loader s not appearing at vertically top and horizontally center of bootstrap modal where I want to show it. It's getting displayed at the back of one text field. I tried making changes in CSS but I couldn't so asking for help.

Below is the internal CSS and HTML of form developed in Bootstrap modal dialog.

  <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>

The <div> with id loader-icon contains the image-loader.

To get better idea where it is currently being displayed refer below screen shot.

If you want I can also provide jQuery AJAX request-response code.

I also want to show the message below that loader image as "Your event is being created..."

Answer 1

Where do you want the loader to be?

If at the top, then remove top : 50%.

If the issue is at the loader is appearing behind a text field, and you want it to appear above that : then add a z-index.

And please the next time you post, either remove the comments from the code. Even better, make a fiddle if you can.

Also you are applying the same style two times to #loader-icon