需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作。先摆效果图。

代码:

//html代码
<style>
#imp{
display: none;
}
</style> <div class="btn-group">
<div class="btn-group">
<button class="btn sbold blue" id="insert" onclick=""><span class="ladda-label">插入</span></button>
</div>
</div>
<div id="imp" style="text-align:center;">
<button class="btn sbold default" id="pz" onclick="insertImg('examFile');" style=" margin-top: 50px" >
<span class="ladda-label">插入图片</span>
</button>
<input type="hidden" value="" id="flag" />
<button class="btn sbold default" id="" onclick="insertMus('excamFile')" style="margin-top: 50px">
<span class="ladda-label">插入音乐</span>
</button>
</div> 
<div class="form-group">
<div>
<input id="examFile" name="examFile" type="file" multiple="multiple"/>
</div>
</div>
//js代码
function initUpload(ctrlName) {
$('#flag').val('1');
$('#flag').text(ctrlName);
}
function pzUpload(ctrlName) {
$('#flag').val('2');
$('#flag').text(ctrlName);
} $("#insert").click(function (fun) {
var id= $("table input[type=checkbox]:checked").val()
    var imp=$('#imp')
if (id != undefined && !id ==''){
var index= layer.open({
title:'请选择插入类型',
type: 1,
area: ['300px', '200px'],
content:imp,
btn: ['确定','返回'],
yes: function (index, layero) {
var ctrlName;
var control;
var url;
var title;
var searchServPath;
if ($('#flag').val() != '') {
if ($('#flag').val() == '1') {
ctrlName = $('#flag').text();
control = $('#' + ctrlName);
url = '/vraxx/exam/upload';
$('#title').text("插入图片")
}
              
$("#examFile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
//
                //
                //
});
layer.close(index);
} else {
layer.msg('请选择插入类型');
}
}
}); } }) 

说明:area可以用百分比值来表示比如说: area['70%', '30%']   另外yes函数可以来写一些业务代码  最后就是 content内容,要注意,现在html中设计好,然后获取到div的节点,就可以展示了

总结:layUI有很多很多更加方便的一些内容,一点一点总结下来,进步ing。

layUI实现可选项 弹框的更多相关文章

  1. pc端弹框

    pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...

  2. 记一次layui弹框关闭问题

    我在博客园记录过layui关于弹框关闭问题,文章为layui关闭弹出层,这次出现了特殊情况,之前是通过layer.closeAll()解决了这个问题,但是这次解决不了.而换成parent.layer. ...

  3. 解决 layui 弹出层(弹框)一闪而过就消失的问题 (转载)

    转载: 原文链接:https://blog.csdn.net/qq_20594019/article/details/83956532 本人遇到问题:使用layer.open()弹出页面层,出现弹框闪 ...

  4. UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  5. layui layer弹框中表格的显示

    场景描述:点击iframe里面的一个按钮,需要在父级弹出一个弹框表格. 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: paren ...

  6. layui子弹框调用父弹框方法

    var thisFrame = parent.window.document.getElementById("LAY_layuiStampDuty1").getElementsBy ...

  7. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  8. layer弹框

    官网http://layer.layui.com/ /!*如果是页面层*/layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的 ...

  9. maximo弹框设置新的功能测试总结

    先介绍下弹框前的准备工作: 1.签名选项——定义系统中可授权的所有功能的唯一标识.定义签名选项是为了授权而已.定义的签名名要和相应的bean类中的方法一致. 2.签名选项中的功能实现,一般都在APPB ...

随机推荐

  1. tp5问题整理

    问题一:致命错误: Class 'think\controller' not found 原因:controller首字母要大写 解决:use think\Controller; 问题二:html页面 ...

  2. Tarjan + bfs HYSBZ 1179Atm

    1179: [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 3250  Solved: 1346[Submit][Statu ...

  3. 全局鼠标钩子:WH_MOUSE_LL, 在【 win 10 上网本】上因为太卡,运行中丢失全局鼠标钩子

    一台几年前买的上网本,让我安装了一个 win 10,然后用来测试程序的时候, 发现 使用 SetWindowsHookEx(WH_MOUSE_LL, mouseHook, GetModuleHandl ...

  4. @Controller @RestController

    知识点:@RestController注解相当于@ResponseBody + @Controller合在一起的作用. 1) 如果只是使用@RestController注解Controller,则Co ...

  5. mysql 在visual studio中的配置

    视图-->其他窗口-->服务器资源管理器-->数据连接-->右键添加连接 servername:localhost username:root password:123456 ...

  6. 程序人生 | 35岁以上的 iOS 程序员都到哪里去了?

    1.网上流传华为公司正在清理 34 岁以上的员工. " 中国区开始集中清理 34 + 的交付员工,...... 去向是跟海外服务部门交换今年新毕业的校招员工,也就是进新人,出旧人. 这些旧人 ...

  7. Python 几个常见函数

    本文主要总结常见的函数知识点. 1.zip函数 用来并行迭代,可以把两个序列并在一起,然后返回一个元组的列表 names = ['Ann','Jame','Anla'] ages = [11,12,1 ...

  8. 爬虫框架Scrapy 之(四) --- scrapy运行原理(管道)

    解析后返回可迭代对象 这个对象返回以后就会被爬虫重新接收,然后进行迭代 通过scrapy crawl budejie -o xx.josn/xx.xml/xx.csv 将迭代数据输出到json.xml ...

  9. Exp5 MSF基础应用 20164314

    一.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,如ms08_067; (成功) 2.一个针对浏览器的攻击,如ms1 ...

  10. PC端判断浏览器类型及移动端判断移动设备类型

    浏览器代理检测,可以检测出来用户使用的浏览器类型,也可以检测浏览器所在的操作系统 navigator.userAgent (1).判断浏览器类型 var t = navigator.userAgent ...