网页弹窗

最新推荐文章于 2024-06-22 22:23:52 发布

清欢ysy

最新推荐文章于 2024-06-22 22:23:52 发布

阅读量1.5k

点赞数

文章标签：前端弹框

本文链接：https://blog.csdn.net/qq_33840251/article/details/90113302

版权

layer 强烈推荐

layer官方演示与讲解（jQuery弹出层插件）

手动实现警告框最不推荐的

$(".close").click(function(){
				$("#test").alert();
		 }

$('#identifier').alert('close');
手动
$('.alert-danger').removeClass('hide').addClass('in')

<style>
	#myAlert {
		transition: margin-top .15s linear, opacity .15s linear;
	}
	
	#alertBox {
		position: absolute;
		left: 50%;
		margin-left: -400px;
		height: 100px;
		width: 800px;
	}
</style>
 
<div class="container">
	<div id="alertBox">
		<div class="alert alert-danger" id="myAlert" style="opacity: 1;">
			<a href="#" class="close" data-dismiss="alert">
				×
			</a>
			<strong>警告！</strong>您的网络连接有问题。
		</div>
	</div>
	<button class="btn btn-default" onclick="showFun();">show</button>
	<button class="btn btn-default" onclick="closeFun();">close</button>
</div>
 
<script>
	// 方法
	function showFun() {
		$("#myAlert").css("margin-top", "0px");
		$("#myAlert").css("opacity", 1);
	}
 
	function closeFun() {
		$("#myAlert").css("margin-top", "10px");
		$("#myAlert").css("opacity", 0);
		//$("#myAlert").alert('close'); //关闭所有的警告框,整个消息框被移除
	}
	// 事件
	$("#myAlert").bind('closed.bs.alert', function() {
		console.log("警告消息框被关闭。");
	});

## bootstrap 模态框（Modal）插件 https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

调用带有 id=“identifier” 的模态框：
$(’#identifier’).modal(options)

例子

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>