1、问题描述：
使用Jquery-conform弹出模态对话框，myform未界面隐藏的DIV片段，在弹出模态对话框时显示其中。当点击确定后，DIV片段出现到了载体界面中
2、解决方法：
在隐藏的DIV中添加一个DIV modal-body，代码如下：
3、代码如下：<div id="dialog-message" class="hide modal"> <form id="myform" name="myform" class="form-horizontal" method="post"> <div class="modal-body">
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 <span class="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、问题图片：
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
