切換Bootstrap打開模式按鈕的顏色onClick和關閉模式

Question

除了使用jQuery，有沒有辦法改變下面的.add-button的顏色，以便它在點擊時切換，當模式關閉時會改回來？

<div className="container"> 

    <button type="button" className="btn btn-md add-button" data-toggle="modal" data-target="#myModal"> 
    <span className="plus-sign">+</span> &nbsp; Contacts Keeper &nbsp;&nbsp; 
    </button> 

    <div className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    ... 
</div> 

Answer 1

而不是在點擊時更改按鈕顏色，您應該在懸停時更改它。因爲只有在這種情況下，您才能看到可見的效果，否則點擊模式將被關閉。

一種在css中使用psuedo類的方法，另一種使用js來更改css樣式的方法。 另外我注意到你正在使用classNames，這意味着可能會使用反應。 在這種情況下，將一個預定義的css類添加到鼠標懸停的現有按鈕css類上，並在鼠標移出時將其刪除。

function changeColor(x) { 
 
    x.style.background = "red"; 
 
} 
 

 
function normalColor(x) { 
 
     x.style.background = "white"; 
 
    }

#test-button:hover{ 
 
    color:red; 
 
    background:green; 
 
    } 
 

 
#test-button:active{ 
 
    background:yellow; 
 
    } 
 

 
#close-button:hover{ 
 
    background:cyan; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<!-- Button trigger modal --> 
 
<button type="button" id="test-button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal1 
 
</button> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" id="test-button1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1"> 
 
    Launch demo modal2 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <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">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title1</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <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">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" id="close-button1" class="btn btn-default" data-dismiss="modal" onmouseover="changeColor(this)" onmouseout="normalColor(this)">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>