网页弹窗

一时失言乱红尘 2022-02-02 12:43 372阅读 0赞

## layer 强烈推荐 ##

[layer官方演示与讲解（jQuery弹出层插件）][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>
    
    <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">×</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>
        </div>
    </div>

## 其他插件 ##

admlte  
[https://adminlte.io/docs/2.4/js-box-widget][https_adminlte.io_docs_2.4_js-box-widget]

[layer_jQuery]: http://layer.layui.com/
[https_adminlte.io_docs_2.4_js-box-widget]: https://adminlte.io/docs/2.4/js-box-widget