模态弹窗口，关闭后显示在载体界面中
2015-07-31 15:33
218 查看
1、问题描述：
使用Jquery-conform弹出模态对话框，myform未界面隐藏的DIV片段，在弹出模态对话框时显示其中。当点击确定后，DIV片段出现到了载体界面中
2、解决方法：
在隐藏的DIV中添加一个DIV modal-body，代码如下：
3、代码如下：
1、载体界面：
1、JS：
4、问题图片：
使用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 <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、问题图片：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 进程切换
- GCD ios多线程 runloop
- python数据结构与算法——桶排序
- POJ 1321：棋盘问题
- SQL去重
- 冒泡排序法
- flash链接“手形”闪烁的解决方法
- IOS TableView Cell重用机制
- 对java对象的地址引用及值引用
- ios 查看设备的homedirectory
- 网店管家 不入塔读取淘宝订单的方法
- Struts2学习笔记(一)——命名空间、路径、通配符
- HashSet分析
- 批量删除xml文件中的<?xml version="1.0" ?>
- lucene入门
- 初识通用数据库操作类――前端easyui-datagrid，form（php）
- swt/jface tableViewer开发简化
- 思达BI软件StyleIntelligence实例教程—雷达图
- jQuery操作class
- iOS Crash文件中常见的Exception Type & Exception Code