Question

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

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

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

我的代码：

//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>

Answer 1

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

添加以上代码。一旦我们点击关闭按钮，它将改变＆＃34;点击我＆＃34;按钮颜色。

Answer 2

这样做：

//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";
}

Answer 3

这样的东西可以很好用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");
})

Answer 4

在样式中为按钮定义默认颜色。单击按钮时，您可以在按钮上添加一个类，它会改变颜色，当模态关闭时，您可以删除改变颜色的类。

Bootstrap为模态关闭hidden.bs.modal设置了特殊事件，当模态成功关闭时触发。您可以收听该事件，并在触发该类时删除该类。

＆＃13;

//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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

 <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>

Answer 6

使用on()方法and shown/hidden modal classes来检测何时打开或关闭。我对您的代码进行了下一次更改：

1）添加了2个新类，每个类对应您需要的每种颜色，因此当您使用toggleClass() jquery方法时，可以将addClass和removeClass之间的切换切换为彩色游戏类。
2） Button #send：添加了带有灰色的类，而不是带有background-color的样式属性。同时删除了btn-default，它会为您提供您不需要的默认颜色。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 7

这是一个工作代码段，我尝试不要更改代码：

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>

希望它有所帮助。

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

7 个答案: