本文为博主原创，未经允许不得转载：

示例如下：

需要注意的地方在id为win的div中需要有：closed="true"这个属性，这个属性为控制dailogn对话框显示与隐藏的属性。

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <title>jQuery EasyUI</title>

     <link rel="stylesheet" type="text/css" href="easyui.css">

     <link rel="stylesheet" type="text/css" href="icon.css">

     <script type="text/javascript" src="jquery.min.js"></script>

     <script type="text/javascript" src="jquery.easyui.min.js"></script>

     <script type="text/javascript" src="datagrid-detailview.js"></script>

 </head>

 <body>

     <a id="name_add_but" href="#" data-options="iconCls:'icon-add'" class="my_but"

                    style="vertical-align: middle;">新增</a>

     <div id="win" class="easyui-dialog" title="提示"  style="width: 400px; padding: 10px 20px; height: 410px;"

         closed="true" buttons="#dlg-buttons">

         <form id="fm" name="frm" method="post" style="margin-top: 20px; margin-left: 20px;">

             <div class="fitem">

                 <label>文件名称:</label>

                 <textarea id="input1"  name="fileName" data-options="multiline:true" style="width: 260px;height:90px;"></textarea>

             </div>

             <div id="dlg-buttons" style="display: block">

                 <a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="submitForm()" style="width: 90px">提交</a>

                 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>

             </div>

         </form>

     </div>

 <script>

     $('#name_add_but').linkbutton({

         onClick: function () {

             addFile();

         }

     });

      $('#input1').textbox({

         prompt: "请输入文件名称，多个文件请换行输入",

     });

     function addFile(){

         $('#win').dialog({

                 title: '新增',

                 width: 450,

                 height: 240,

                 top:150,

                 closed: false,//显示对话框

                 cache: false,

                 modal: true

             });

     }

     function submitForm(){

         $('#win').dialog({

             closed: true, // 隱藏列表

         });

         alert("添加成功");

     }

 </script>

 </body>

实现效果：

点击提交按钮出现：

easyUI使用dailog实现弹出框带表单功能的更多相关文章

  1. JEECG弹出框提交表单

    一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...

  2. Android 自定义弹出框带EditText

    EditText 布局页面 edittext_ownername_dialog.xml: <?xml version="1.0" encoding="utf-8&q ...

  3. vue iview modal弹出框 form表单验证

    一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二. ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. 玩转EasyUi弹出框

    这两天在搞EasyUi的弹出框,弹出框之前也搞过很多个版本,总是觉得不那么完美,刚好最近有时间,就往多处想了想,功能基本上达到我的预期,并且在开发过程中遇到很多小技巧,特撰文如下. 走起:在EasyU ...

  6. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  7. 尝试用React写几个通用组件 - 带搜索功能的下拉列表，开关切换按钮，弹出框

    尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...

  8. 弹出框中选项卡的运用（easyUI）

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  9. 去掉网页中alert和confirm弹出框自带的网址

    去掉网页中alert和confirm弹出框自带的网址 Alert: <script> window.alert = function(name){ var iframe = documen ...

随机推荐

  1. springMVC01，使用xml

    unit03_01 unit03_02 springmvc流程图 案例:hello示例 /hello.do --> springmvc --> /WEB-INF/hello.jsp /he ...

  2. openshift 配置 bitbucket 的webhook

    参考 https://docs.openshift.org/latest/dev_guide/builds/triggering_builds.html oc set triggers bc < ...

  3. Codeforces 1114 - A/B/C/D/E/F - (Undone)

    链接:http://codeforces.com/contest/1114 A - Got Any Grapes? 题意:甲乙丙三个人吃葡萄,总共有三种葡萄:绿葡萄.紫葡萄和黑葡萄,甲乙丙三个人至少要 ...

  4. XSS笔记

    XSS测试代码: <img src="javascript:alert(/xss/)"> <script src=http://evil.com/xss.js&g ...

  5. ES6 Map 与 Set

    Map 对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. Maps 和 Objects 的区别 一个 Object 的键只能是字符串或者 Symbols,但一个 Ma ...

  6. select()函数 的学习

    select()的介绍 全是拷贝的如下文章: https://www.cnblogs.com/wenqiang/p/5508541.html select()函数的用例代码摘录如下文章: https: ...

  7. 浅谈AC自动机

    写在前面:从10月23日开始写这篇博文,离NOIP2018只有十多天了.坚持不停课的倔强蒟蒻(我)尽量每天挤时间多搞一搞信竞(然而还要准备期中考试).NOIP争取考一个好成绩吧. 一.简介 AC自动机 ...

  8. (转)spring中的拦截器（HandlerInterceptor+MethodInterceptor）

    1.  过滤器跟拦截器的区别 在说拦截器之前,不得不说一下过滤器,有时候往往被这两个词搞的头大. 其实我们最先接触的就是过滤器,还记得web.xml中配置的<filter>吗~ 你应该知道 ...

  9. Cocos 2dx项目lua调用OC出现卡死但不闪退的坑

    最近新上线的一个游戏,发现线上游戏有部分功能在点击的时候出现了没有反应的情况.通过调试源码,发现是原生OC的代码出现了崩溃,但是比较奇怪的是线上的Bugly没有任何记录,这个功能属于高频高能,而且又是 ...

  10. 25.75k8s

    扣子helm上传dm需要在  local下执行  helm repo index helm list --tls  (加上--tls才可以)