模态弹窗口，关闭后显示在载体界面中

来源：互联网发布：mac免费软件推荐编辑：程序博客网时间：2024/05/27 16:41

1、问题描述：

使用Jquery-conform弹出模态对话框，myform未界面隐藏的DIV片段，在弹出模态对话框时显示其中。当点击确定后，DIV片段出现到了载体界面中

2、解决方法：

在隐藏的DIV中添加一个DIV modal-body，代码如下：

<div id="dialog-message" class="hide modal"><form id="myform" name="myform"  class="form-horizontal" method="post"><div class="modal-body">

3、代码如下：

1、载体界面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML><html><head><meta charset="utf-8" /><meta name="description" content="Dynamic tables and grids using jqGrid plugin" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><!-- bootstrap & fontawesome --><link rel="stylesheet" href="<%=basePath%>admin/ui/css/bootstrap.min.css" /><link rel="stylesheet" href="<%=basePath%>admin/ui/css/font-awesome.min.css" /><!-- page specific plugin styles --><link rel="stylesheet" href="<%=basePath%>admin/ui/css/jquery-ui.min.css" /><link rel="stylesheet" href="<%=basePath%>admin/ui/css/jquery-confirm.min.css" /><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ui.jqgrid.css" /><!-- text fonts --><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace-fonts.css" /><!-- ace styles --><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace.min.css" id="main-ace-style" /><!--[if lte IE 9]><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace-part2.min.css" /><![endif]--><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace-skins.min.css" /><link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace-rtl.min.css" /><!--[if lte IE 9]>  <link rel="stylesheet" href="<%=basePath%>admin/ui/css/ace-ie.min.css" /><![endif]--><!-- inline styles related to this page --><!-- ace settings handler --><script src="<%=basePath%>admin/ui/js/ace-extra.min.js"></script><!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!--[if lte IE 8]><script src="<%=basePath%>admin/ui/js/html5shiv.min.js"></script><script src="<%=basePath%>admin/ui/js/respond.min.js"></script><![endif]--></head><body><div class=""><form class="form-search"  id="form-search"><div class="input-group"><input  id="searchParam" name="searchParam" type="text" class="form-control search-query" placeholder="版本号" /><span class="input-group-btn"><button  id="btnSearch" name="btnSearch"  type="button" class="btn btn-success btn-sm">Search<i class="icon-search icon-on-right bigger-108"></i></button> </span></div></form></div><div class="tabbable" style="margin-bottom: 5px; margin-top: 5px;"><div class="btn-group" style="margin-bottom: 5px; margin-top: 5px;"><button id="id-btn-upload" type="button" class="btn btn-success"><i class="glyphicon glyphicon-circle-arrow-up"></i>上传</button><button id="id-btn-edit" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-edit"></i>编辑</button><button id="id-btn-del" type="button" class="btn btn-danger"><i class="glyphicon glyphicon-trash"></i>删除</button></div><table id="grid-table"></table><div id="grid-pager"></div></div><div id="dialog-message" class="hide modal"><form id="myform" name="myform"  class="form-horizontal" method="post"><div class="modal-body"><div class="row" style="text-align:center;margin-bottom:20px;"><span> <span class="bigger-150 bolder"> <i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload <spanclass="smaller-80 grey">(or click)</span> <br> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i></span></div><div class="row"><div class="col-xs-12 col-sm-6"><div class="input-group" style="margin-top:20px;margin-bottom:20px;"><span class="input-group-addon" id="basic-addon1">APP名称</span><input id="APPNAME" name="APPNAME" type="text" class="form-control input-large"></div><div class="input-group" style="margin-top:20px;margin-bottom:20px;"><span class="input-group-addon" id="basic-addon1">发布日期</span><input class="form-control" id="PUBLISHDATE" name="PUBLISHDATE" onClick=WdatePicker(); type="text" /><span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i> </span></div></div><div class="col-xs-12 col-sm-6"><div class="input-group" style="margin-top:20px;margin-bottom:20px;"><span class="input-group-addon" id="basic-addon1">版本号</span><input id="VERSION" name="VERSION" type="text" class="form-control input-large"></div><div class="input-group" style="margin-top:20px;margin-bottom:20px;"><span class="input-group-addon" id="basic-addon1" style="margin-right:20px; width:100;">状态    </span> <select class="selectpicker form-control input-large">    <option id="online"  value="1">上线</option>    <option id="offline" value="0">下线</option>  </select></div></div></div><div class="row"><div class="col-xs-12 col-sm-12"><div class="input-group" style="margin-top: 20px;"><span class="input-group-addon" id="basic-addon1">产品描述</span><textarea  id="DESCRIPTION" name="DESCRIPTION" rows="11" class="form-control"/></textarea></div></div></div></div></form></div><script type="text/javascript">if('ontouchstart' in document.documentElement) document.write("<script src='<%=basePath%>admin/ui/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");</script>               <script type="text/javascript" src="<%=basePath%>admin/ui/js/jquery1x.min.js"></script>                <!--[if lte IE 8]>  <script src="<%=basePath%>admin/ui/js/excanvas.min.js"></script><![endif]--><!-- page specific plugin scripts --><script type="text/javascript" src="<%=basePath%>admin/ui/js/My97DatePicker/WdatePicker.js"></script><script type="text/javascript" src="<%=basePath%>admin/ui/js/jqGrid/i18n/grid.locale-cn.js"></script><script type="text/javascript" src="<%=basePath%>admin/ui/js/jqGrid/jquery.jqGrid.min.js"></script>        <script type="text/javascript" src="<%=basePath%>admin/ui/js/jquery-ui.min.js"></script>        <script type="text/javascript" src="<%=basePath%>admin/ui/js/jquery-confirm.min.js"></script><!-- basic scripts --><script type="text/javascript" src="<%=basePath%>admin/ui/js/bootstrap.min.js"></script><script type="text/javascript" src="<%=basePath%>admin/ui/js/jquery.validate.min.js"></script>        <script type="text/javascript" src="<%=basePath%>admin/ui/js/validation/message_cn.js"></script>        <script type="text/javascript" src="<%=basePath%>admin/ui/js/validation/validate-methods.js"></script>        <script type="text/javascript" src="<%=basePath%>admin/ui/js/validation/jquery-validate.bootstrap-tooltip.min.js"></script>                <!-- ace scripts <script stype="text/javascript" rc="<%=basePath%>admin/ui/js/ace-elements.min.js"></script><script type="text/javascript" src="<%=basePath%>admin/ui/js/ace.min.js"></script>        -->        <!-- inline scripts related to this page --><script type="text/javascript" src="<%=basePath%>admin/util/json2.js"></script><script type="text/javascript" src="<%=basePath%>admin/util/frame.js"></script><script type="text/javascript" src="<%=basePath%>admin/appmgr/appsmgr.js"></script><script type="text/javascript">  var ctx = '<%=basePath%>';</script></body></html>

1、JS：

//编辑按钮绑定事件$("#id-btn-edit").on('click',function(e){e.preventDefault();var id = $(grid_selector).jqGrid('getGridParam','selarrrow');if(id.length==1){$('#myform')[0].reset();  $.ajax({    type: 'post',    url: ctx+'manage/findById.action',    data: {  id : id[0],  jsonParam : JSON.stringify({postSqlId:'OPERATION_APPS.findUserById'})     },    success: function(data) {       setForm(data);      $("#dialog-message").removeClass('hide').dialog({resizable : false,height : 'auto',width : 600,modal : true,title : "<div class='widget-header widget-header-small'><h4 class='smaller'>编辑APP应用版本信息</h4></div>",title_html : true,buttons : [{text : "提交","class" : "btn btn-primary btn-xs",click : function(){if(!$('#myform').valid()) return false;updateApp($(this));$(this).dialog("close");    }}, {text : "取消","class" : "btn btn-xs",click : function() {$(this).dialog("close");}}]               });     }});}else{showDialog('','');}});

4、问题图片：

0 0