-1
私のCCSコードに関する質問があります。 ローディングバー(ボタンをクリックしたときに表示される)の上にボタンがあります。CSSとマテリアライズ
ボタンを押すと、ローディングバーが表示されますが、ボタンが押し下げられ、ボタンが固定の位置に移動しようとしました。
別の方法があるかどうか、自分のコードに解決策を教えてもらえますか?
ボタンとロードバーと私のHTMLコード:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
これは、ボタンの私のCSSで、.btnセレクタは、マテリアライズからのクラスです:
.btn{
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function() {
$('#submitForm').on('click', function (e) {
e.preventDefault();
if($("#submitForm").hasClass('disabled')){
return;
}
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data = {
name: name,
phonenumber: phonenumber
};
$.ajax({
url: 'addNew',
data: data,
method: 'post',
success: function (data) {
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function() {
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
});
},
})
})
})();
</script>