如何在模态引导程序上单击关闭后更改颜色按钮(提交)

如何在模态上单击关闭按钮后更改按钮颜色提交。

第一次按下按钮时会改变其颜色并出现模态。但是当我关闭模态中的关闭按钮时，第一个按钮不会将颜色更改为原点。

告诉我按下关闭按钮时如何更改颜色

我的代码：

//this code for change color after click
var b1 = document.getElementById("send");
var buttonClicked = false;
b1.onclick = function() {
buttonClicked = !buttonClicked;
if(buttonClicked === true){
b1.style.backgroundColor = "#F47321";  
}else{
b1.style.backgroundColor = "#807874";  
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" id="send" class="btn btn-default btn-lg btn-block" data-toggle="modal" style="background-color: #807874" data-target="#myModal"><font color="white">CLICK ME</font></button>
<div id="modals">
<div id="myModal" class="modal fade" role="dialog" required>
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Syarat & Ketentuan</h4>
</div>
<!-- body modal -->
<div class="modal-body" style="height:250px;width:auto;overflow:auto;padding:2%">
		<div id="toss">
<script type='text/javascript'>
$(document).ready(function(){
$( "#toss" ).load( "tos.html" );
});
</script>
</div>
</div>
<!-- footer modal -->
<div class="modal-footer">
			
		<div align="left">
		<label class="checkbox-inline">
		<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" />Saya setuju dengan syarat & ketentuan
		</label>&nbsp;
		<br>
		&nbsp;<p><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
		</div>
	
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
		  <input type="submit" class="btn btn-success" id="btncheck" value="Send" />

		</p></font>
	   </div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked);//true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});
</script>

on()and shown/hidden模态类使用方法来检测它何时打开或关闭。我对你的代码进行了下一步的更改：

1)添加了 2 个新类，您需要的每种颜色一个，因此当您使用 toggleClass() jquery 方法时，您可以切换 beetweenaddClass并removeClass玩颜色类。
2)Button #send：添加了灰色的类，而不是带有background-color的样式属性。还删除了btn-default，为您提供了不需要的默认颜色。

$(document).ready(function(){
$("#myModal").on("shown.bs.modal", function () { 
$("#send").toggleClass("grey orange")
});
$("#myModal").on("hidden.bs.modal", function () { 
$("#send").toggleClass("grey orange")
});
});

.orange{
background-color: #F47321;
}
.grey{
background-color: #807874;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" id="send" class="btn btn-lg btn-block grey" data-toggle="modal" data-target="#myModal"><font color="white">CLICK ME</font></button>
<div id="modals">
<div id="myModal" class="modal fade" role="dialog" required>
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Syarat & Ketentuan</h4>
</div>
<!-- body modal -->
<div class="modal-body" style="height:250px;width:auto;overflow:auto;padding:2%">
		<div id="toss">
<script type='text/javascript'>
$(document).ready(function(){
$( "#toss" ).load( "tos.html" );
});
</script>
</div>
</div>
<!-- footer modal -->
<div class="modal-footer">
			
		<div align="left">
		<label class="checkbox-inline">
		<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" />Saya setuju dengan syarat & ketentuan
		</label>&nbsp;
		<br>
		&nbsp;<p><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
		</div>
	
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
		  <input type="submit" class="btn btn-success" id="btncheck" value="Send" />

		</p></font>
	   </div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked);//true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});
</script>

这样的东西可能很好 jquery ，你已经添加了它。

//this capture de close modal event
$("#myModal").on("hidden.bs.modal", function () {
$("#send").css("background-color", "#807874");
});
$("#send").on("click", function(){
$("#send").css("background-color", "#F47321");
})

在样式中为按钮定义默认颜色。单击按钮时，您可以向按钮添加一个类，该类会更改其颜色，当 modal 关闭时，您可以删除更改其颜色的类。

引导程序具有为模态关闭hidden.bs.modal创建的特殊事件，当模态成功关闭时触发。您可以侦听该事件，并在触发该类时将其删除。

//this code for change color after click
var b1 = document.getElementById("send");
b1.onclick = function() {
// whenever button is clicked add a class to the button, which overwrites the style
$(b1).addClass("btn-modal-open");
}
$("#myModal").on("hidden.bs.modal", function(){
// Attach event to the modal close, and when the modal is closed remove the class which overwrites background color
$(b1).removeClass('btn-modal-open');
});

#send{
background: #807874;
}
.btn-modal-open{
background: #F47321 !important;;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" id="send" class="btn btn-default btn-lg btn-block" data-toggle="modal"  data-target="#myModal"><font color="white">CLICK ME</font></button>
<div id="modals">
<div id="myModal" class="modal fade" role="dialog" required>
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Syarat & Ketentuan</h4>
</div>
<!-- body modal -->
<div class="modal-body" style="height:250px;width:auto;overflow:auto;padding:2%">
		<div id="toss">
<script type='text/javascript'>
$(document).ready(function(){
$( "#toss" ).load( "tos.html" );
});
</script>
</div>
</div>
<!-- footer modal -->
<div class="modal-footer">
			
		<div align="left">
		<label class="checkbox-inline">
		<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" />Saya setuju dengan syarat & ketentuan
		</label>&nbsp;
		<br>
		&nbsp;<p><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
		</div>
	
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
		  <input type="submit" class="btn btn-success" id="btncheck" value="Send" />

		</p></font>
	   </div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked);//true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});
</script>

<div class="modal-header">
<button type="button" class="close" id="model-cross" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Syarat & Ketentuan</h4>
</div>

Javascript代码：

<script>
var x = document.getElementById('modal-cross');
x.onclick = function() { 
b1.style.backgroundColor = "#807874";
}
</script>

这样做：

//this code for change color after click
var b1 = document.getElementById("send");
b1.onclick = function() {
buttonClicked = !buttonClicked;
b1.style.backgroundColor = "#F47321";  
}

var x = document.getElementsByClassName("close");
x.onclick = function() {
b1.style.backgroundColor = "#807874";
}

$('#modals').on('hidden.bs.modal', function () {
$(".btn-block").css("background-color",'#807874');
})

添加上面的代码。单击关闭按钮后，它将更改"单击我"按钮的颜色。

这是一个工作片段，我尽量不更改太多代码：

var b1 = document.getElementById("send");
b1.onclick = function() {
b1.style.backgroundColor = "#F47321";
}
$('#modals').on('hidden.bs.modal', function () {
b1.style.backgroundColor = '#807874';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" id="send" class="btn btn-default btn-lg btn-block" data-toggle="modal" style="background-color: #807874" data-target="#myModal"><font color="white">CLICK ME</font></button>
<div id="modals">
<div id="myModal" class="modal fade" role="dialog" required>
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Syarat & Ketentuan</h4>
</div>
<!-- body modal -->
<div class="modal-body" style="height:250px;width:auto;overflow:auto;padding:2%">
<div id="toss">
<script type='text/javascript'>
$(document).ready(function() {
$("#toss").load("tos.html");
});
</script>
</div>
</div>
<!-- footer modal -->
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
		<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" />Saya setuju dengan syarat & ketentuan
		</label>&nbsp;
<br> &nbsp;
<p><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
</div>
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-success" id="btncheck" value="Send" />
</p>
</font>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked); //true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});
</script>

希望对您有所帮助。

相关内容

最新更新

热门标签：