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

示例如下：

需要注意的地方在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. 剑指offer——python【第34题】第一个只出现一次的字符

    题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写) 思路 遍历字符串,找到那个第 ...

  2. ThinkPHP 缓存技术详解 使用大S方法

    如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷,假如我们把读取数据的过程分为三个层,第一个是访问层,第一个是缓存层,第三个是数 ...

  3. php计算几分钟前、几小时前、几天前的几个函数

    函数方法: /*php计算几分钟前.几小时前.几天前的几个函数*/ function get_date($time){ $t=time()-$time; $f=array( '31536000'=&g ...

  4. js的小知识7

    1.函数都有返回值...... 而方法的本质也是函数,所有也有返回值. Document.getElementById()返回的是获取的标签 getElementByClassName()和getEl ...

  5. HTML、CSS知识点,面试开发都会需要--No.4 内容布局

    No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...

  6. currval &nextval的差异理解

    --currval/nextval的区别 select * from 订单 delete --nextval INSERT INTO 订单(订单编号,单价) --nextval每执行一次,会在下列插入 ...

  7. 【Python基础】zip函数的使用

    zip函数的使用 描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同, ...

  8. 11.2-uC/OS-III添加任务到就绪队列

    1.uC/OS-III提供很多服务可以把任务添加到就绪列表中. 最明显的服务是OSTaskCreate(), 它通常创建准备运行的任务并将任务放入就绪列表中.如图6-6所示,就绪列表中该优先级中已经有 ...

  9. 关于 spring MVC 配置自动扫描中 use-default-filters 属性

    1.springMVC 设置扫描 Bean 的两种常见写法 1.1.先看第一种常见的配置:默认 <!-- 配置Controller扫描 --> <context:component- ...

  10. Django组件——分页器和中间件

    分页器 Django内置分页器(paginator) 分页器函数为paginator,里面有几个重要的参数需要我们了解 paginator = Paginator(book_list, 10) #第二 ...