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

示例如下：

需要注意的地方在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. python使用matplotlib绘制折线图教程

    Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...

  2. Dubbo 分布式服务框架入门

    要想了解 Dubbo 是什么,我们不防先了解它有什么用.使用场景:比如我想开发一个网上商城项目,这个网上商城呢,比较复杂,分为 pc 端 web 管理后台,微信端销售公众号,那么我们分成四个项目,pc ...

  3. mysql日志分类

    mysql的日志分类: (1)错误日志:记录mysql服务的启动,运行,停止mysql服务时出现的问题 [mysqld] log_error=[/path/filename] (2)通用查询日志:记录 ...

  4. javascript 关键字高亮显示实现代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. ios学习--iphone 实现下拉菜单

    原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...

  6. libvirt虚拟库

    转载自:https://www.ibm.com/developerworks/cn/linux/l-libvirt/index.html Libvirt 虚拟化库剖析   讲到向外扩展计算(比如云计算 ...

  7. Win10部署IIS 10.0

    win10自带IIS10.0 控制面板 >> 程序 >>启用或关闭Windows功能 勾选完之后会安装IIS,安装完成后 计算机管理 >> 服务和应用程序 > ...

  8. bounds的应用

    frame是参考父view的坐标系来设置自己左上角的位置.设置bounds可以修改自己坐标系的原点位置,进而影响到其“子view”的显示位置.   向上滚动scrollview,我们就不断增加scro ...

  9. CentOS 6.8 安装TigerVNC 实现 Linux 远程桌面并安装火狐浏览器

    CentOS 6.8 安装TigerVNC 实现 Linux 远程桌面并安装火狐浏览器 vnc客户端地址:https://files.cnblogs.com/files/MYSQLZOUQI/vnc- ...

  10. 【JVM】-NO.113.JVM.1 -【JDK11 HashMap详解-0-全局-put】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...