最近需要做的弹窗还挺多的,但是千篇一律,今天将最简单的两个写一下,分别是BootStrap和Layui实现的,效果哪一个好看你们自己看,其实都不好看,哈哈,不过很实用,主要是用在一些申请什么的。
应用场景:页面提交简短的信息
效果预览:
BootStrap实现
Layui实现
好的,下面我们分别将代码简单的写一下
BootStrap代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <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">×</button> <h4 class="modal-title" id="myModalLabel">标题</h4> </div> <div class="modal-body"><textarea style="height: 100%;width: 100%;" id="test"></textarea></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> <script type="text/javascript"> $("#btn").click(function(){ var test = $("#test").val(); console.log("取到的数据是:"+test); }) </script> </html>
PS:可以直接复制使用
Layui代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/layui.css"/> <!--<link href="https://cdn.bootcss.com/layer/3.1.0/mobile/need/layer.css" rel="stylesheet">--> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script> <!--<script src="../layui.js" type="text/javascript" charset="utf-8"></script>--> </head> <body> <button id="test" class="layui-btn" style="margin-left: 2rem;margin-top: 2rem;">点击测试</button> </body> <script type="text/javascript"> $("#test").click(function(){ //layer.msg("测试"); layer.prompt({title: '标题', formType: 2},function(val, index){ if(val == ""){ layer.msg("数据不可以为空"); } else{ layer.close(index); console.log("输入的数据是:"+val) } }); }) </script> </html>
PS:原谅我没有找到Layer.css的CDN,你们自己下载以下再引用吧!
原本准备写一下细节描述的,但是看看代码确实没什么好写的,都是一看就懂的代码,哪里确实不明白的可以下方留言,我会回复解答。