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

示例如下：

需要注意的地方在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. jquery的设计亮点

    jquery的亮点我目前学习到一下几点: 1.封装库利用window的挂载实现闭包. 库一定要封装来防止变量污染全局,方式要么对象,要么立即执行函数.jquery用了立即执行函数.因为立即执行函数里的 ...

  2. CString中 format、trimLeft和trimright、trim 和FindOneOf用法

    1.format 可以帮助各种类型转换成CString. a. int 转 CString CString str; int number = 4; str.Format(_T("%d&qu ...

  3. elk-准备（一）

    一.在搭建elk之前需要做准备工作 1.创建elk用户 groupadd elk -g 1001 useradd elk -m -d /home/elk -s /bin/bash -g 1001 -u ...

  4. python3中报错AttributeError: module 'sys' has no attribute 'setdefaultencoding'

    reload(sys) sys.setdefaultencoding("utf-8") f = open('.\\24.novel.txt','rb') str = f.read( ...

  5. Redis集合 安装 哨兵集群 配置

    redis相关 redis基础 redis发布订阅 redis持久化RDB与AOF redis不重启,切换RDB备份到AOF备份 redis安全配置 redis主从同步 redis哨兵集群 redis ...

  6. virtualenv与virtualenvwrapper虚拟环境

    python开发之virtualenv与virtualenvwrapper讲解 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物 ...

  7. javascript call apply

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...

  8. [daily][python2] int型IP地址与string型IP地址互转

    使用python2,类似如下操作. >>> import socket >>> import struct >>> socket.ntohl(]) ...

  9. 洛谷P2743 乐曲主题Musical Themes [USACO5.1] SA

    正解:SA 解题报告: 传送门 这题三个条件嘛,那就一个个考虑下都解决了就把这题解决了嘛QwQ 那就直接分别针对三个条件写下各个击破就欧克辣? 1)长度大于等于5:求出答案之后和5比大小 2)不能有公 ...

  10. 20190422 SQL SERVER 服务

    -- 数据库服务-- SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样-- SQL Server代理(MSSQLSERVER)是代理服务,比如你 ...