我有一个按钮,单击后会弹出警报“ Hello”。第一次单击时效果很好,但是在关闭警报并再次单击按钮后,警报不会显示。请帮忙。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Show Alert</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="row">
<div class="alert alert-success hidden" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<span class="glyphicon glyphicon-ok"></span> Hello
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-default">Open
Alert</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('#success-alert').removeClass('hidden');
});
});
</script>
</body>
</html>
您的hidden
课程应该回来,但不是由于data-dismiss
。data-dismiss
从您的关闭按钮中删除,并向其附加一个click事件,这将使hidden
单击时的类返回。这是工作代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Show Alert</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="row">
<div class="alert alert-success hidden" id="success-alert">
<button type="button" class="close">x</button>
<span class="glyphicon glyphicon-ok"></span> Hello
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-default">Open
Alert</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('#success-alert').removeClass('hidden');
});
$("button.close").click(function() {
$('#success-alert').addClass('hidden');
});
});
</script>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句