layui 好用的一个弹窗效果

方法一

<link rel="stylesheet" href="layui.css" media="all">
<a href="javascript:();" οnclick="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:;" οnclick="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>