jquery显示bootstrap 4和加载器不显示的方法问题
jquery显示bootstrap 4和加载器不显示的方法问题
提问于 2019-04-23 14:01:01
$('.modal-content div.loader').show();.show方法添加内联css显示块，但仍未显示加载程序div
ajax调用之前
当我删除close按钮方法时，我在调用ajax之后延迟了加载程序
<div class="modal fade show" id="addnotetocal" tabindex="-1" role="dialog" aria-labelledby="addnotetocal" style="padding-right: 17px;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Fees</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form name="event-field">
<div class="form-row">
<div class="input-group-prepend col-md-12">
<!-- <label for="fee">Fee</label> -->
<span class="input-group-text"><i class="fa fa-dollar"></i></span>
<input type="number" name="fee" id="fee" class="form-control" placeholder="">
</div>
<div class="custom gap"></div>
<div class="col-md-12">
<input class="" type="checkbox" value="" id="na">
<label class="form-check-label" for="na">
Not Available
</label>
</div>
</div>
<input type="hidden" name="selected_date" id="selected_date" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="ev_cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="ev_submit" data-action="submit-event">Submit</button>
<button type="button" class="btn btn-secondary" id="ev_delete" data-action="submit-event">Delete</button>
<button type="button" class="btn btn-primary" id="ev_update" data-action="submit-event">Update</button>
</div>
<div class="loader">
<img src="<?php echo get_stylesheet_directory_uri().'/img/loading.gif' ?>" alt="">
</div>
</div>
</div>
</div>我已经添加了模态代码bootstrap 4和model opning，但是在加载程序不能工作的情况下出现了ajax调用问题。
请查看此内容并快速更新她
加载器和图像css
.loader {
display: none;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
z-index: 999;
}
.loader img {
top: 50%;
position: absolute;
}回答 1
Stack Overflow用户
发布于 2019-05-15 07:08:24
这里的诀窍是data- backdrop ="false“style=" background - color : rgba(0，0，0，0.5);”，方法是删除默认背景并通过使用一些alpha设置对话框本身的背景色来创建一个虚拟背景。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>注意:单击背景并不会像预期的那样关闭对话框。解决方案:所以要实现这一点，你必须添加一些javascript代码。以下是您如何实现此目标的一些示例。
$('.modal').click(function(event){
$(event.target).modal('hide');
});HTML:将此代码放在body标记中
<div id="LoaderWindow">
<div id="Loader"></div>
</div>用于加载的/* CSS */
.loader-window {
width: 100%;
height: 100%;
position: fixed;
z-index: 1051;
background: rgba(54, 70, 93, 0.95);
}
.loader {
position: absolute;
top:50%;
left:50%;
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #5BFEC8;
width: 60px;
height: 60px;
margin-top:-30px;
margin-left:-30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}你必须使用jquery来添加类。
function loader(
operation
) {
if (operation == 'add') {
$('#LoaderWindow').addClass('loader-window');
$('#Loader').addClass('loader');
} else {
$('#LoaderWindow').removeClass('loader-window');
$('#Loader').removeClass('loader');
}
}加载器(‘add’)将在请求数据时使用，并在收到响应后使用加载器(‘remove’)；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55805171
复制相关文章
相似问题
腾讯云开发者
