Question

我有一个弹出警报的按钮＆＃34;你好＆＃34;点击后。它在第一次点击时工作正常，但在我关闭警报后再次点击按钮时，警报不会显示。请帮忙。

＆＃13;

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

＆＃13;

Answer 1

您的hidden课程应该回来，但不是data-dismiss。从关闭按钮中删除data-dismiss并向其附加一个点击事件，这将在点击时返回hidden课程。这是工作代码。

＆＃13;

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

＆＃13;

Answer 2

这是因为

Data-dismiss完全删除元素。删除此属性并在关闭按钮上绑定click事件，您可以使用此事件隐藏警报。

<!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');
			});
          
            $(".close").click(function() {
				$("#success-alert").addClass('hidden');
			});
          

		});
	</script>
</body>

</html>

单击按钮后显示警报

2 个答案: