直接复制粘贴就能用!!!
模态框使用
模态框使用流程
参考 Bootstrap 官方文档拷贝模态框的元素,
点击JavaScript插件,选择模态框,里面有许多样式,以其中的样式为例
Bootstrap 模态框是一个轻量级的多用途JavaScript弹出窗口,可自定义和响应式。可以使用它在网站中显示警告窗口、视频和图片。使用Bootstrap构建的网站可以使用模态框来显示条款和条件(作为注册过程的一部分),视频,甚至社交媒体小部件。
为了可以更好地理解它,我们来看一下Bootstrap模态框的各个组成部分。【相关推荐:《bootstrap教程》】
Bootstrap 模态框主要分为三个部分:头部(header),正文(body)和页脚(footer)。每个部分都有自己的意义,因此我们应该正确的使用它们。我们稍后将讨论这些。Bootstrap模态框最令人兴奋的是什么?你不需要写任何JavaScript代码就可以使用它!所有的代码和样式都是由Bootstrap预定义的。你所需要做的只是使用正确的标记和属性来触发它。
默认的模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 模态框(Modal)插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%-- 模态框导包--%>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Document</title>
<style>
* {
font-size: 15px;
margin: 0;
padding: 0;
}
input {
width: 320px;
height: 24px;
border: 1px solid #999;
border-radius: 4px;
}
.formErr {
border: 1px solid red;
}
.form .label {
display: block;
float: left;
width: 128px;
height: 40px;
line-height: 40px;
text-align: end;
}
.form .txt {
display: block;
float: left;
width: 340px;
height: 40px;
line-height: 40px;
padding-left: 16px;
}
.form button {
width: 56px;
height: 24px;
background-color: green;
border: 0;
border-radius: 4px;
color: white;
}
.form .errTips {
width: 226px;
background-color: lightpink;
color: darkred;
border-radius: 4px;
margin-left: 144px;
margin-top: 6px;
margin-bottom: 4px;
padding: 16px 48px;
}
/*!*模态框*!*/
/*.modal {*/
/* !* 默认隐藏 *!*/
/* !*display: none;*!*/
/* !* 根据浏览器定位 *!*/
/* position: fixed;*/
/* !* 放在顶部 *!*/
/* z-index: 1;*/
/* left: 0;*/
/* top: 0;*/
/* width: 100%; !*全宽 *!*/
/* height: 100%; !*全高 *!*/
/* overflow: auto;*/
/* background-color: rgba(0, 0, 0, 0.4); !* 背景色 *!*/
/*}*/
/*!*模态框内容*!*/
/*.modal-content {*/
/* display: flex; !*采用flexbox布局*!*/
/* flex-direction: column; !*垂直排列*!*/
/* position: relative;*/
/* background-color: #f1f3ff;*/
/* margin: 10% auto; !*距顶部15% 水平居中*!*/
/* padding: 30px;*/
/* border: 5px solid #888;*/
/* width: 30%;*/
/* animation: topDown 2s; !* 自定义动画,从模态框内容上到下出现*!*/
/*}*/
/*@keyframes topDown {*/
/* from {*/
/* top: -300px;*/
/* opacity: 0*/
/* }*/
/* to {*/
/* top: 0;*/
/* opacity: 1*/
/* }*/
/*}*/
/*!*模态框头部*!*/
/*.modal-header {*/
/* display: flex; !*采用flexbox布局*!*/
/* flex-direction: row; !*水平布局*!*/
/* align-items: center; !*内容垂直居中*!*/
/* justify-content: space-between;*/
/*}*/
/*!*关闭X 样式*!*/
/*.close {*/
/* color: #aaa;*/
/* float: right;*/
/* font-size: 28px;*/
/* font-weight: bold;*/
/*}*/
/*.close:hover {*/
/* color: black;*/
/* text-decoration: none;*/
/* cursor: pointer;*/
/*}*/
.niceButton{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.niceButton:hover{
background-color: #1795bb;
}
.niceButton:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
.niceButton3{
background-color: #1795bb;
border: none;
color:white;
padding:16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.niceButton3:hover{
background-color: #fff;
color: #1795bb;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>
友情提示!
</h4> <strong>首页面仅为预购订单</strong>
</div>
<!-- 触发按钮 -->
<button id="triggerBtn" class="niceButton3" >添加SPU</button>
<button id="triggerBtn1" class="niceButton3" >添加计划主表</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModa2">
添加计划主表
</button>
</div>
<table class="table">
<tr id="tr">
<th>
订单创建时间
</th>
<th>
采购原因
</th>
<th>
预计采购时间
</th>
<th>
预计支付
</th>
<th>
订单失效时间
</th>
<th>
订单状态
</th>
<th>
boss答复
</th>
<th>
操作
</th>
<th>
操作
</th>
</tr>
</table>
</div>
</div>
</div>
<!-- 模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<form style="text-align: center" id="fm">
<center>
<div><strong>SPU基本信息</strong></div>
<div> 产品名称<input type="text" name="spuName" value=""/></div>
<div> 英文名称<input type="text" name="spuEnName" value=""/></div>
<div> 分类 <input type="text" name="spuType" value=""/></div>
<div> 广告语<input type="text" name="spuSlogan" value=""/></div>
<div> 品牌\产地<input type="text" name="spuBrand" value=""/></div>
<div style="display: none"> 称重标识<input type="hidden" name="weighingLogo" value="无"/></div>
<div style="display: none"> 保质期<input type="hidden" name="exDate" value="270"/></div>
<div style="display: none"> 滞销预警期<input type="hidden" name="goodDay" value="180"/></div>
<div style="display: none"> 长<input type="text" name="spLong" value="10"/></div>
<div style="display: none"> 宽<input type="text" name="spuWidth" value="5"/></div>
<div style="display: none"> 高<input type="text" name="spuHeiht" value="5"/></div>
<div style="display: none"> 临期预警期<input type="hidden" name="goodWarningDate" value="260"/></div>
<div> 规格<input type="text" name="spuSpecification" value=""/></div>
<div> 重量<input type="text" name="spuWeight" value=""/></div>
<div> 销售单位<input type="text" name="marketingUnit" value=""/></div>
<div> 最小订购位 <input type="text" name="minUnit" value=""/></div>
<div style="display: none"> 储存条件<input type="hidden" name="storageConditions" value="避光阴凉"/></div>
<div style="display: none"> 配送条件<input type="hidden" name="deliveryConditions" value="物流"/></div>
<div style="display: none"> 退换货条件<input type="hidden" name="exchangeConditions" value="7天无理由包退"/></div>
</center>
</form>
<button onclick="relod()" class="niceButton3" >关闭</button>
<button onclick="addSpu()" class="niceButton3">提交</button>
</div>
</div>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form style="text-align: center" id="fm1">
<center>
<div><strong>SPU基本信息</strong></div>
<div> 产品名称<input type="text" name="spuName" value=""/></div>
<div> 英文名称<input type="text" name="spuEnName" value=""/></div>
<div> 分类 <input type="text" name="spuType" value=""/></div>
<div> 广告语<input type="text" name="spuSlogan" value=""/></div>
</center>
</form>
<button onclick="relod()" class="niceButton3" >关闭</button>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script >
queryAllGoods();
function queryAllGoods() {
$.ajax( {
"url" :"${pageContext.request.contextPath}/queryPlanMain",
"type" : "get",
"data" : {},
"dataType" : "json",
"contentType": "application/json;charset=utf-8;",
"success" : function(result) {
console.log(result);
let temp ="";
for (let gs in result) {
temp += `<tr>
<td>\${result[gs].createTime}</td>
<td>\${result[gs].reason}</td>
<td>\${result[gs].predictPurchaseTime}</td>
<td>\${result[gs].predictCost}</td>
<td>\${result[gs].failureTime}</td>
<td>\${result[gs].state}</td>
<td>\${result[gs].bossAnswer}</td>
<td><a href="#" style="text-decoration:none" ">查看明细</a></td>
<td><a href="#" style="text-decoration:none" ">生成订单</a></td>
</tr>`
}
$("#tr").siblings().remove();
$("#tr").after(temp);
},
"error" : function() {
alert("网络正忙");
}
} );
}
function addSpu() {
var data = {};
//第一种方式是jq name选择器
//jq方法
var formobject= $("#fm").serializeArray();//数组 序列化数组
$(formobject).each(function(){//遍历 数组 序列化数组
if(data[this.name]){
data[this.name]+=';'+this.value;
}else{
data[this.name]=this.value;
}
});
console.log(data);//验证data 数据
for ( var i in data) {
if(data[i].trim()==""){
alert("请补全信息");
return;
}
}
$.ajax( {
"url" : "${pageContext.request.contextPath}/AddSpu", // 要提交的URL路径
"type" : "post", // 发送请求的方式
"data" : JSON.stringify(data), // 要发送到服务器的数据
"contentType": "application/json;charset=utf-8;",
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) {// 请求成功后要执行的代码
console.log(result);
if(result==1){
alert("添加成功");
window.location.reload();
}else{
alert("添加失败");
}
},
"error" : function() {
alert("网络正忙");
}
} );
}
function relod() {
window.location.reload();
}
//
// /*建立模态框对象*/
// var modalBox = {};
//
// /*获取模态框*/
//
// modalBox.modal = document.getElementById("myModal");
// /*获得trigger按钮*/
// modalBox.triggerBtn = document.getElementById("triggerBtn");
// /*获得关闭按钮*/
// modalBox.closeBtn = document.getElementById("closeBtn");
//
// /*模态框显示*/
// modalBox.show = function () {
// console.log(this.modal);
// this.modal.style.display = "block";
// };
//
// /*模态框关闭*/
// modalBox.close = function () {
// this.modal.style.display = "none";
// };
//
// /*当用户点击模态框内容之外的区域,模态框也会关闭*/
// modalBox.outsideClick = function () {
// var modal = this.modal;
// window.onclick = function (event) {
// if (event.target == modal) {
// modal.style.display = "none";
// }
// }
// };
//
// /*模态框初始化*/
// modalBox.init = function () {
// var that = this;
// this.triggerBtn.onclick = function () {
// that.show();
// }
//
// this.closeBtn.onclick = function () {
// that.close();
// }
// this.outsideClick();
// };
//
// modalBox.init();
//
</script>
</html>