纯个人笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签</title>
<!--引入一个jQuery -->
<script src="./common/Js/jquery.js"></script>
</head>
<style>
.label-box{
width:1000px;
height: 50px;
border:1px solid #999;
margin:auto;
margin-top:100px;
}
.label-box button{
width:120px;
height:40px;
margin-top:5px;
background:#00c296;
color:#fff;
border:none;
border-radius: 5px;
margin-left:10px;
}
.alert-add-label{
width:100%;
height:100%;
background:rgba(0,0,0,.3);
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
display: none;
}
.div1{
width:500px;
height:200px;
background:#fff;
margin:auto;
margin-top:100px;
border:1px solid #ccc;
border-radius: 5px;
}
.alert-add-label div p{
line-height:35px;
margin-top:0px;
padding-left:20px;
font-weight:bold;
border-bottom:1px solid #eee;
}
.alert-add-label div p label{
float:right;
margin-right:10px;
font-weight:500;
color:#999;
cursor: pointer;
}
.alert-add-label div input{
width:400px;
height:40px;
border:1px solid #ccc;
margin-left:50px;
margin-top:30px;
}
.label-botton{
width:100%;
height:50px;
text-align: center;
margin-top:30px;
}
.label-botton button:first-child{
background:#00c296;
color:#fff;
border:none;
width:60px;
height:35px;
border-radius: 5px;
cursor:pointer;
}
.label-botton button:last-child{
background:#ccc;
color:#fff;
border:none;
width:60px;
height:35px;
border-radius: 5px;
cursor: pointer;
margin-left:20px;
}
.label-box label{
padding:2px 10px;
border:1px solid #ccc;
line-height:30px;
margin-top:7px;
float:left;
margin-left:10px;
background:#efefef;
}
#label-box label{
background:#b9b9b920;
padding:0px 10px;
color:#007986;
font-size:12px;
border:1px solid #ccc;
}
</style>
<body>
<!-- 自定义添加 '文章' 标签 -->
<form method="post" action="./DataBase.php">
<div class="label-box" id="label-box">
<button type="button" id="add">添加标签</button>
</div>
<button>提交</button>
</form>
<!--弹出菜单-->
<div class="alert-add-label">
<div class="div1">
<p>添加标签 <label onclick="closeAlertDiv();">X</label></p>
<input type="text" id="keyword" name="keyword" placeholder="请输入关键词" />
<div class="label-botton">
<button id="submitLabel">确定</button>
<button onclick="closeAlertDiv();">取消</button>
</div>
</div>
</div>
</body>
</html>
<script>
$('#submitLabel').click(function(){//确认按钮
var keyword = document.getElementById("keyword").value;//获取输入框的value值
if(keyword){
$('#add').before('<label>'+keyword+'</label>');//向#add元素的前面追加元素
document.getElementById("keyword").value='';//将输入框清空
//创建表单
$('.label-box').append('<input type="text" name="label[]" value="'+keyword+'" />');//创建表单 将keyword镶嵌进默认值
$('.alert-add-label').hide();//隐藏弹窗
}else{
$('.alert-add-label').hide();
}
});
function closeAlertDiv (){//取消按钮
$('.alert-add-label').hide();
}
$('#add').click(function(){//添加标签
$('.alert-add-label').show();
document.getElementById("keyword").focus();//过去输入框的焦点
});
</script>
