javascript - BlockUI is not displaying on Bootstrap modal -

bootstrap uiblock not showing on bootstrap modal.. can able display on normal page whenver tried block ui on modal not showing on top of modal instead, showing below of same modal. possible display on top of modal..

this block ui code

$.blockui({   message: '<img src="images/activity.gif" style="width:50px;"/>',   css: {     backgroundcolor: 'transparent',     color: '#000',     basez: '2000',     border: '0 none',     theme: 'true'   } }); 

<div id="udateleadmodal" class="modal animated bouncein" tabindex="-1" role="dialog" aria-labelledby="mymodallabel3" aria-hidden="true">   <!-- dialog -->   <div class="modal-dialog modal_dialog_edit" style="overflow-y: scroll; max-height:850%;">     <!-- content -->     <div class="modal-content modal_content_edit">       <!-- header -->       <div class="modal-header">         <button type="button" class="close header-close-btn" data-dismiss="modal">           <img src="images/ic_action_remove.png" style="width:30px;height:30px;" onclick="closemodal_2()" class="header-close-btn" />         </button>         <h1 id="mymodallabel4" class="modal-title"></h1>       </div>       <!-- header -->       <!-- body -->       <div class="modal-body modal_body_content modal-body_edit">         <div id="reschedulediv">           <div id="left">             <div class="row" style="margin-left:10px; margin-top:10px;">               <div class="col-xs-5">                 <label id="subjectlabel" style="font-size:18px; color:#f58125;"> course </label>                 <div id="subject">                   <input type="text" class="form-control" id="inputsubject" placeholder="subject" readonly style="background-color:#ffffff; width:100%; height:45px; font-size:20px; background-color:#f3f781; border-color:#f58125;border-width:2px;">                 </div>               </div>               <div class="col-xs-5">                 <label style="font-size:18px; color:#f58125; margin-left:10px;"> visit date </label>                 <div id=visitdate class="input-group">                   <input type="text" class="form-control" id="inputvisitdate" readonly placeholder="visit date" onclick="javascript:$('#inputvisitdate').datepicker('show');" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                   <span class="input-group-addon">  <span class="glyphicon glyphicon-calendar" aria-hidden="true" style="font-size:20px; display:inline-block;" onclick="javascript:$('#inputvisitdate').datepicker('show');"></span></span>                 </div>               </div>             </div>              <div class="row" style="margin-left:20px; ">               <div class="col-xs-5">                 <label id="visitfromtimelabel" style="font-size:18px; color:#f58125; margin-top:10px;"> visit time</label>                 <div id="visitfromtime" class="input-group bootstrap-timepicker timepicker">                   <input type="text" class="form-control input-small" id="inputvisitfromtime" readonly placeholder="visit time" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                   <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>                 </div>               </div>               <div class="col-xs-5" style="padding-top:10px;">                 <label id="visittotimelabel" style="font-size:18px; color:#f58125;"> visit time </label>                 <div id="visittotime" class="input-group bootstrap-timepicker timepicker">                   <input type="text" class="form-control input-small" id="inputvisittotime" readonly placeholder="visit time" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                   <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>                 </div>               </div>             </div>              <div class="row" style="margin-left:20px;">               <div class="col-xs-5" style="padding-top:10px;">                 <label id="locationlabel" style="font-size:18px; color:#f58125;"> location </label>                 <div id="location">                   <input type="text" class="form-control" id="inputlocation" placeholder="location" maxlength="50" oninput="maxlengthcheck(this)" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                 </div>               </div>               <div class="col-xs-5" style="padding-top:10px;">                 <label id="landmarklabel" style="font-size:18px; color:#f58125;"> landmark </label>                 <div id="landmark">                   <input type="text" class="form-control" id="inputlandmark" placeholder="landmark" maxlength="50" oninput="maxlengthcheck(this)" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                 </div>               </div>             </div>             <div class="row" style="margin-left:20px;">               <div class="col-xs-5" style="padding-top:10px;">                 <label id="locationlabel" style="font-size:18px; color:#f58125;"> address </label>                 <div id="location">                   <input type="text" class="form-control" id="inputaddress" placeholder="address" maxlength="50" oninput="maxlengthcheck(this)" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                 </div>               </div>               <div class="col-xs-5" style="padding-top:10px;">                 <label id="landmarklabel" style="font-size:18px; color:#f58125;"> city </label>                 <div id="landmark">                   <input type="text" class="form-control" id="inputcity" placeholder="city" maxlength="50" oninput="maxlengthcheck(this)" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                 </div>               </div>             </div>             <div class="row" style="margin-left:20px;">               <div class="col-xs-10" style="padding-top:10px;">                 <label id="commentslabel" for="comment" style="font-size:18px; color:#f58125;"> comments </label>                 <div id="leademail">                   <textarea class="form-control" rows="3" id="comments" maxlength="50" oninput="maxlengthcheck(this)" style="background-color:#ffffff; width:100%; height:70px; font-size:20px;"></textarea>                 </div>               </div>             </div>              <div class="row" style="margin-left:20px;">               <div class="col-xs-10" style="padding-top:10px;">                 <label id="locationlabel" style="font-size:18px; color:#f58125;"> status </label>                 <select class="selectpicker form-control show-tick" id="reschedulesubstatus" style="background-color:#ffffff; width:100%; height:45px; font-size:20px;">                   <option value="1">busy</option>                   <option value="2">out of office</option>                 </select>               </div>               <div class="col-xs-1" style="padding-top:50px; float:right;">                 <button type="button" class="btn btn-primary btn-sm " id="savebtn" style="background-color: while; font-size:18px;">save</button>               </div>             </div>           </div>         </div>       </div>       <!-- body -->     </div>     <!-- content -->   </div>   <!-- dialog --> </div> 

css

.modal {   z-index: 9999;   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0; } .modal-dialog {   position: fixed;   margin: 0;   width: 100%;   height: 100%;   padding: 0; } .modal-body_edit {   position: fixed;   top: 150px;   bottom: 0px;   font-weight: 300; } .modal_dialog_edit {   margin: 0px;   padding: 0px;   left: 0;   overflow-y: initial !important } .modal_content_edit {   position: absolute;   top: 116px;   right: 0;   bottom: 0;   left: 0; } .modal_body_content {   z-index: 9998;   width: 100%;   height: auto;   float: left;   margin-top: 0px; } 

and have 1 modal, whenever click button on modal trying block ui , displaying on spinning image. have tried changing img z-index , basez value no luck

please me