layui 好用的一个弹窗效果

最新推荐文章于 2025-10-07 04:46:08 发布

原创最新推荐文章于 2025-10-07 04:46:08 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#layui

layui 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了两种利用layui框架实现网页弹出窗口的方法。方法一通过定义viewinfo函数调用layer组件来创建弹窗；方法二则直接使用layui内置的layer模块及opendlg函数实现相同功能。

方法一

<link rel="stylesheet" href="layui.css" media="all">
<a href="javascript:();" onclick="viewinfo('/tanchu.html')">点击弹出</a>
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		function opendialog(title,url,width,height){
			if(typeof(width)=='undefined') width='50%';
			if(typeof(height)=='undefined') height='70%';
			layer.open({
		        type: 2 //此处以iframe举例
		        ,skin: 'layui-layer-demo' //样式类名
		        ,title: title
		        ,maxmin:false
		        ,area: [width, height]
		        ,content: url      
		      });
		}
//定义弹出窗口
function viewinfo(url){
opendialog("弹出窗口",url,"600px","90%");
}		
</script>

方法二

<link rel="stylesheet" href="layui.css"  media="all">
<a href="javascript:;" onclick="opendlg('弹出标题','/tanchu.html','1100','600')" >
点击弹出</a>
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.use('layer', function(){ 
  var $ = layui.jquery, layer = layui.layer; 
});

function opendlg(title,url,width,height){
	if(typeof(width)=='undefined') width=500;
	if(typeof(height)=='undefined') height=700;
	layer.open({
        type: 2 
        ,title: title
        ,area: [width+'px', height+'px']
        ,shade: 0.5
        ,content: url
      });
}
</script>