您好我想实现一个加载器,当用户点击一个配置文件时应该在给定时间后隐藏..我实际上实现了一个超时功能,只要用户点击按钮,div就会在特定时间后隐藏
加载程序位于左侧而不是相应的div上,导致UI出现问题
以下是我的代码段: -
$scope.totalNumberOfProfile = totalNumberOfProfile;
$scope.categoryOfProfile = "Member Who Shortlisted You";
$scope.custom = true;
$scope.alertDisplayed = false;
$scope.connect = function(profile) {
$timeout(function() {
$scope.totalNumberOfProfile--;
profile.show = false;
profile.status = "connect";
document.getElementById("myDiv").style.display="block";
//console.log($scope.totalNumberOfProfile);
if ($scope.totalNumberOfProfile == 0) {
$scope.custom = false;
$scope.alertDisplayed = true;
$timeout(function() {
$scope.alertDisplayed = false;
}, 2000)
};
}, 600)
};
代码的html是: -
<div owl-carousel-item="" ng-repeat="profile in updatedProfile | filter:isoffice" ng-if="profile.show">
<!-- Panel in owl carousel -->
<div id="discover " ng-class="discover_image" ng-switch on="profile.member">
<li style="margin-left:0px; margin-right:0px">
<div class="thumbnail_photo">
<button class="close" ng-click="remove(profile)"><span class="glyphicon glyphicon-remove"></span></button>
<a href="#/discover/{{profile.basic.username}} " target="_blank"><span class="discover_pic_container" style="background:url({{profile.photo_details.photos[0].domain_name+profile.photo_details.photos[0].medium}}) no-repeat center top"></span></a>
<div class="discover_transparent">
<div class="discover_name">{{profile.basic.display_name }}</div>
</div>
</div>
<div class="recent_join_user_info">23 yrs, 5'4", Gujarati, Hindu Mumbai, India</div>
<!-- <button class="discover_connect_btn btn btn-lg " ng-click="connect(profile)" ng-if="profile.member">Connect</button>-->
<button ng-class="{'discover_premium btn btn-lg': userLogin == 2, 'discover_connect_btn btn btn-lg': userLogin == 3}" ng-click="connect(profile)" >{{userinfor}}</button>
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/725.gif"></div>
</li>
</div>
</div>
我试图实现的gif文件名为725.gif ..请帮帮我..谢谢
答案 0 :(得分:0)
您应该使用加载程序div添加这些CSS属性。
#myDiv {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}