后台添加代码的方式模态框的方法

以添加含有帮助的方式为例:

1,在某DIV后面增加代码:

$("#ListBoxControl1_1772158006").after(function()
    { return "<div id=‘firstmodal‘ class=‘modal container fade‘ role=‘dialog‘ tabindex=‘-1‘ style=‘display: none;‘><div class=‘modal-header‘><button type=‘button‘ class=‘close‘ data-dismiss=‘modal‘ aria-hidden=‘true‘>×</button><h4 class=‘modal-title‘>第一层模态窗口</h4></div><div class=‘modal-body‘><div id=‘GroupControl4_1811834094-body‘><div data-visible=‘true‘><a id=‘LinkLabel1_1674513499‘ name=‘‘ href=‘‘ data-visible=‘true‘ class=‘btn btn-info‘><span>修改</span></a></div><div class=‘form-group‘><label for=‘XTextBox3_2100682917‘>批号</label><div class=‘input-icon-group‘><input id=‘XTextBox3_2100682917‘ name=‘XTextBox3_2100682917‘ placeholder=‘‘ data-clearbtn=‘true‘ type=‘text‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, value:‘DHDFL.BATCHID‘}‘ data-bv-notempty=‘false‘ class=‘form-control‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div></div><div class=‘form-group‘><label for=‘XCalculator1_2100682917‘>数量</label><div class=‘input-icon-group‘><input type=‘hidden‘ value=‘2‘><input id=‘XCalculator1_2100682917‘ name=‘XCalculator1_2100682917‘ placeholder=‘‘ data-clearbtn=‘true‘ type=‘number‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, numberbox:‘DHDFL.IMQUANTITY‘}‘ data-bv-notempty=‘false‘ class=‘form-control‘ data-bv-accuracy=‘true‘ data-bv-accuracy-num=‘8‘ data-bv-accuracy-message=‘‘ data-bv-field=‘XCalculator1_2100682917‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div><small class=‘help-block‘ data-bv-validator=‘accuracy‘ data-bv-for=‘XCalculator1_2100682917‘ data-bv-result=‘NOT_VALIDATED‘ style=‘display: none;‘>请输入精度内数字</small></div><div class=‘form-group‘><label for=‘XSmartDictLookup2_723727198‘>货位</label><div class=‘input-group‘><div class=‘input-icon-group‘><input id=‘XSmartDictLookup2_723727198_value‘ name=‘XSmartDictLookup2_723727198_value‘ type=‘hidden‘ class=‘excluded‘><input type=‘text‘ id=‘XSmartDictLookup2_723727198‘ name=‘XSmartDictLookup2_723727198‘ placeholder=‘‘ data-role=‘lookup‘ data-clearbtn=‘true‘ data-showfavor=‘false‘ data-multiselect=‘true‘ data-separator=‘;‘ data-istree=‘false‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, value:‘DHDFL.LOCATIONID_LOCATIONNAME‘}‘ data-bv-notempty=‘false‘ data-helpid=‘48df741a-3e3f-4e9a-b25a-64b880851ec0‘ data-valuefield=‘LOCATIONID‘ data-textfield=‘LOCATIONNAME‘ data-businessobject=‘‘ data-businessoperation=‘‘ data-permissionfield=‘‘ data-refelementid=‘‘ data-mapfields=‘{‘LOCATIONID_LOCATIONCODE‘: ‘LOCATIONCODE‘,‘LOCATIONID‘: ‘LOCATIONID‘}‘ class=‘form-control‘ readonly=‘‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div><span class=‘input-group-btn‘><button class=‘btn btn-info search‘ type=‘button‘><i class=‘iconjs iconjs-lookup‘> </i></button></span></div></div></div><div class=‘modal-footer‘ style=‘text-align: center;‘><button type=‘button‘ data-dismiss=‘modal‘ class=‘btn btn-default‘>关闭</button></div></div>"
    });

2,增加弹出模态框方法:

$("#ToolStripButton3_1872779387").on("click",function()
    {
        $("#firstmodal").modal();

        $("#firstmodal").simpleEnhance();//帮助初始化
    });

3,总代码

    $("#ListBoxControl1_1772158006").after(function()
    { return "<div id=‘firstmodal‘ class=‘modal container fade‘ role=‘dialog‘ tabindex=‘-1‘ style=‘display: none;‘><div class=‘modal-header‘><button type=‘button‘ class=‘close‘ data-dismiss=‘modal‘ aria-hidden=‘true‘>×</button><h4 class=‘modal-title‘>第一层模态窗口</h4></div><div class=‘modal-body‘><div id=‘GroupControl4_1811834094-body‘><div data-visible=‘true‘><a id=‘LinkLabel1_1674513499‘ name=‘‘ href=‘‘ data-visible=‘true‘ class=‘btn btn-info‘><span>修改</span></a></div><div class=‘form-group‘><label for=‘XTextBox3_2100682917‘>批号</label><div class=‘input-icon-group‘><input id=‘XTextBox3_2100682917‘ name=‘XTextBox3_2100682917‘ placeholder=‘‘ data-clearbtn=‘true‘ type=‘text‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, value:‘DHDFL.BATCHID‘}‘ data-bv-notempty=‘false‘ class=‘form-control‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div></div><div class=‘form-group‘><label for=‘XCalculator1_2100682917‘>数量</label><div class=‘input-icon-group‘><input type=‘hidden‘ value=‘2‘><input id=‘XCalculator1_2100682917‘ name=‘XCalculator1_2100682917‘ placeholder=‘‘ data-clearbtn=‘true‘ type=‘number‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, numberbox:‘DHDFL.IMQUANTITY‘}‘ data-bv-notempty=‘false‘ class=‘form-control‘ data-bv-accuracy=‘true‘ data-bv-accuracy-num=‘8‘ data-bv-accuracy-message=‘‘ data-bv-field=‘XCalculator1_2100682917‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div><small class=‘help-block‘ data-bv-validator=‘accuracy‘ data-bv-for=‘XCalculator1_2100682917‘ data-bv-result=‘NOT_VALIDATED‘ style=‘display: none;‘>请输入精度内数字</small></div><div class=‘form-group‘><label for=‘XSmartDictLookup2_723727198‘>货位</label><div class=‘input-group‘><div class=‘input-icon-group‘><input id=‘XSmartDictLookup2_723727198_value‘ name=‘XSmartDictLookup2_723727198_value‘ type=‘hidden‘ class=‘excluded‘><input type=‘text‘ id=‘XSmartDictLookup2_723727198‘ name=‘XSmartDictLookup2_723727198‘ placeholder=‘‘ data-role=‘lookup‘ data-clearbtn=‘true‘ data-showfavor=‘false‘ data-multiselect=‘true‘ data-separator=‘;‘ data-istree=‘false‘ data-visible=‘true‘ data-bind=‘datasource:{dataSourceName:‘Instance_DataModel14_Card‘, value:‘DHDFL.LOCATIONID_LOCATIONNAME‘}‘ data-bv-notempty=‘false‘ data-helpid=‘48df741a-3e3f-4e9a-b25a-64b880851ec0‘ data-valuefield=‘LOCATIONID‘ data-textfield=‘LOCATIONNAME‘ data-businessobject=‘‘ data-businessoperation=‘‘ data-permissionfield=‘‘ data-refelementid=‘‘ data-mapfields=‘{‘LOCATIONID_LOCATIONCODE‘: ‘LOCATIONCODE‘,‘LOCATIONID‘: ‘LOCATIONID‘}‘ class=‘form-control‘ readonly=‘‘> <span data-role=‘clearBtn‘ class=‘iconjs iconjs-clear input-icon input-icon-clear‘> </span></div><span class=‘input-group-btn‘><button class=‘btn btn-info search‘ type=‘button‘><i class=‘iconjs iconjs-lookup‘> </i></button></span></div></div></div><div class=‘modal-footer‘ style=‘text-align: center;‘><button type=‘button‘ data-dismiss=‘modal‘ class=‘btn btn-default‘>关闭</button></div></div>"
    });

    $("#ToolStripButton3_1872779387").on("click",function()
    {
        $("#firstmodal").modal();

        $("#firstmodal").simpleEnhance();
    });
时间: 2024-10-20 19:58:01

后台添加代码的方式模态框的方法的相关文章

使用bootstrap的插件实现模态框效果方法步骤详解

本文和大家分享的主要是使用bootstrap 库的模态框插件 modal.js 来实现模态框效果相关内容,同时也使大家进一步熟悉 bootstrap 的插件使用,一起来看看吧,希望对大家学习bootstrap有所帮助. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.

[jQ]使用jQuery将多条数据插入模态框的方法

------------------------------------------------------------------------------------------------------ //Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="mo

转--程序无法添加到打开方式列表里解决方法

有时候,同时安装两个版本的同一个软件,并且安装到不同目录,那么,第一次关联的软件就会写入注册表,第二个就算你选择了打开方式列表中的默认,还是会打开第一个,甚至你删除了第一个之后,第二个无法添加到打开方式列表中——那不是电脑的错,他在他记忆中的路径中找不到你选择的这个软件. 来给他洗洗脑吧!! 程序无法添加到打开方式列表里 更新程序版本后程序的路径发生了变动,而注册表里的路径却尚未修改,结果就出现了“打开方式”里无法添加应用程序的情况. “开始”—“运行”—输入“regedit”点回车,打开注册表

关于EXT gridPanel进行高级查询时load提交后台乱码以及其他方式更新store的方法及遇到的问题

Ext.data.Store  加载数据的几个方法及注意的事项 下面为定义的Store var ds_edisCommonUser = new Ext.data.uStore({ storeId:'edisCommonUser', model:'Edis_CommonUser', pageSize:itemPerPage, autoLoad:false, proxy:{ type:'ajax', method:'POST', url:'EdisCommonUser/getUsers.action

Bootstrap模态框按钮

1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --

图片点击后出现模态框效果的实现

很多时候我们在浏览图片时,会发现点击图片后,会弹出一个被点击图片的放大图片浮在页面上,占满整个窗口.这就是图片模态框效果. 这个效果可以使用某些js库实现,如bpopupJs.但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法. 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭按钮和图片的标题. 因此,我们的实现思路就是: 图片模态框有大图片,关闭按钮,图片标题三部分. 将图片模态框隐藏,在点击小图片之后,模态框出现. 点击关闭按钮后,模态框隐藏. 二.HT

[javascript]编码&amp;i字符串格式化&amp;nput历史记录&amp;清空模态框

js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 针对字符编码 javascript:escape("\u6625\u8282"); //输出 "%u6625%u8282" javascript:unescape("%u6625%u8282"); //输出 "春节" javasc

Python测试开发-创建模态框及保存数据

Python测试开发-创建模态框及保存数据 原创: fin  测试开发社区  前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相应的组件. 1.界面原型 点击添加,弹出模态框, 然后输入 用户:tester, 消息:你好.如下图1所示: ▲图1 再点击保存,那么数据库就存入了以上输入的数据,查看界面的用户列表会显示tester,如下图2所示: ▲图2 2.开发过程 接下

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla