除了使用 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> Contacts Keeper
</button>
<div className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
...
</div>
最佳答案
与其在单击时更改按钮颜色,不如在悬停时更改它。因为只有在这种情况下,您才能看到可见的效果,否则当点击模式将关闭时。
一种方法是在css中使用伪类,另一种方法是使用js改变css样式。
我还注意到您正在使用 classNames
,这意味着可能正在使用 react。
在这种情况下,在鼠标悬停时将预定义的 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">×</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">×</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>
关于css - 切换 Bootstrap 打开模态按钮的颜色 onClick 和关闭模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40078795/