layui下layer弹出框(iframe)

 一、使用layui弹窗需引入文件jquery.js,jquery-ui.min.css,layer.js,jquery-ui.min.js ,这些文件项目中都有,没有直接去官网下载地址:https://www.layui.com/

 <link rel="stylesheet" href="<%=path %>/skin/js/bootstrap.min.css" type="text/css">
 <link rel="stylesheet" href="<%=path %>/skin/css/jquery-ui.min.css" type="text/css">
 <link rel="stylesheet" href="<%=path %>/skin/css/font-awesome.css" type="text/css">
 <link rel="stylesheet" href="<%=path %>/skin/css/ui.css" type="text/css">
  <!--<link rel="stylesheet" href="<%=path %>/skin/css/form.css" type="text/css"> -->
 <link rel="stylesheet" href="<%=path %>/skin/datatable/datatables.css" type="text/css">
 <link rel="stylesheet" href="<%=path %>/skin/css/grid-common.css" type="text/css">
 
 
  <script type="text/javascript" src="<%=path %>/skin/jquery.js"></script>
  <script type="text/javascript" src="<%=path %>/skin/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="<%=path %>/skin/js/form.js"></script> 
  <script type="text/javascript" src="<%=path %>/skin/datatable/datatables.js"></script> 
  <script type="text/javascript" src="<%=path %>/skin/layer/layer.js"></script>
  <script type="text/javascript" src="<%=path %>/skin/js/ui.js"></script> 
  <script type="text/javascript" src="<%=path %>/skin/js/jquery-ui.min.js"></script>

 

 
  
 二  、此处是调用弹窗js,layuitc()是点击页面中弹窗被调用,

             几个参数:parent:是为了解决遮罩层不能覆盖父页面;

                               type:弹窗类型,此处是使用的iframe

                               area:定义弹窗的宽度和高度

                               title:定义弹窗标题和标题的字体大小                             

                               content:定义要弹出的页面                                

<script type="text/javascript">
    function  layuitc(){
        parent.layer.open({
            type:2,//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
            area:['1300px','700px'],
            title:['修改','15px'],
            content: context + '/foreigndata/updata?foreignid=05781d60-7e75-406e-a77b-3a784b5f66ae'
        })
    }

</script>

 

三、此处定义点击弹出的按钮
 

<body>
     <button type="button" class="btn ue-btn-primary" onclick="layuitc()" >
       弹窗
     </button>     
</body>


 

如果有帮助到你,欢迎各位小伙伴评论点赞。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yjm2017

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值