layui单独弹出iframe批量调用

最新推荐文章于 2024-06-19 11:31:39 发布

langyu1021

最新推荐文章于 2024-06-19 11:31:39 发布

阅读量1k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/langyu1021/article/details/78621998

版权

layui 专栏收录该内容

7 篇文章 1 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
  <a href="javascript:;" onclick="opendlg('百度','http://www.baidu.com',500,600)"  class="layui-btn"/></a>
  <a href="javascript:;" onclick="opendlg('腾讯','http://www.qq.com',500,600)"  class="layui-btn"/></a>
  <a href="javascript:;" onclick="opendlg('新浪','http://www.sina.com.cn')"  class="layui-btn"/></a>
    <a href="javascript:;" onclick="opendlg('网易','http://www.163.com')"  class="layui-btn"/></a>
</div>
<script src="css/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
});

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

</body>
</html>