先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！
HTML：
应用标识1
Box">
Box_top">
Box_top_title">
Box_top_close">X
Box_button">
CSS：
Box{display: none; width: 600px; min-height: 200px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; position: absolute;z-index:44; top: 10%;left: 50%;margin-left: -300px;
Box-shadow: 0px 5px 10px #666}
.data_z_create_
Box_center_quxiao{background-color: #ea5d5b;color: #fff;margin-right:10px; width: auto!important;padding: 0px 10px;}
.data_z_create_
Box_center_quxiao:hover{background-color: #d2322d;}
.data_tips{padding: 10px; width: 90%; margin: 0px auto; color: #a94442;background-color: #f2dede;border:1px solid #ebccd1;border-radius: 5px;}
.data_input{height: auto;padding:0px 30px;}
.data_input ul li{height: 50px; line-height: 50px;}
.data_input_input input{text-indent: 10px; width:70%; height: 40px; line-height: 40px; border-radius: 5px; border: 1px solid #ccc;}
.data_input_tips{margin-left: 5%;display: none;}
.data_z_create_
Box_top_title{margin-left: 20px;font-weight: bold;}
.shua{margin-top: 20px;float: left;}
.shua span{display: inline-block;width: 95%; float: right;}
.data_state_buttonl_tips{color: #4CAE4C;font-weight: bold;display: none;}
JS：
")
var $_span1 = $("
应用标识：")
$(".iden_top ul li:eq(0)").css({
"background-color": "#fff","border-bottom": "1px solid #fff"
}).children().removeClass("iden_top_dete");
$(".iden_top ul li:eq(0)").children(".iden_add_name").addClass("ll")
$(".iden_top_button").click(function() {
$("#create_z").show()
$(".data_z_create_
Box").show(300)
$(".data_z_create_
Box_top_title").html("
修改应用标识")
$(".create_z_create_
Box_center_baocun").show();
$(".create_z_create_
Box_center_queding").hide();
$(".data_input ul li div").remove();
$(".data_input ul li").append($_span1)
$(".data_input_input input").val($(this).siblings(".iden_add_name").text())
$(".create_z_create_
Box_center_quxiao").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_span1.remove()
})
$(".create_z_create_
Box_center_baocun").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$(".ll").text($(this).parent().siblings().children().find("input").val())
$_span1.remove()
})
})
$(".create_z_create_
Box_top_close").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_span1.remove()
})
var a = 2;
$(".iden_add").click(function() {
var clis = $(".iden_top ul li").length;
if(clis <= 4) {
var $_li = $("
应用标识" + a + "
");
$(".iden_top ul").append($_li);
$_li.css({
"background-color": "#fff","border-bottom": "1px solid #fff"
}).children("div").addClass("iden_top_dete");
$_li.children("span").addClass("iden_top_button")
$_li.siblings().css({
"background-color": "#eee","border-bottom": "1px solid #ccc"
}).children("div").removeClass("iden_top_dete");
$_li.siblings().children("span").removeClass("iden_top_button");
$_li.children(".iden_add_name").addClass("ll");
$_li.siblings().children(".iden_add_name").removeClass("ll");
$(".iden_top_dete").click(function() {
$(this).parent($_li).addClass("qq")
$("#create_z").show()
$(".data_z_create_
Box").show(300)
$(".data_z_create_
Box_top_title").html("
提示")
$(".create_z_create_
Box_center_baocun").hide();
$(".create_z_create_
Box_center_queding").show();
$(".data_input ul li span").remove();
$(".data_input ul li").append($_div)
})
$(".create_z_create_
Box_center_quxiao").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_div.remove()
$(".iden_top ul li").removeClass("qq")
})
$(".create_z_create_
Box_center_queding").click(function() {
$(".qq").remove()
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_div.remove()
$(".iden_top ul li:eq(0)").css({
"background-color": "#fff","border-bottom": "1px solid #fff"
}).children("span").addClass("iden_top_button")
})
$(".iden_top_button").click(function() {
$("#create_z").show()
$(".data_z_create_
Box").show(300)
$(".data_z_create_
Box_top_title").html("
修改应用标识")
$(".create_z_create_
Box_center_baocun").show();
$(".create_z_create_
Box_center_queding").hide();
$(".data_input ul li div").remove();
$(".data_input ul li").append($_span1)
$(".data_input_input input").val($(this).siblings(".iden_add_name").text())
$(".create_z_create_
Box_center_quxiao").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_span1.remove()
})
$(".create_z_create_
Box_center_baocun").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$(".ll").text($(this).parent().siblings().children().find("input").val())
$_span1.remove()
})
})
$(".create_z_create_
Box_top_close").click(function() {
$("#create_z").hide()
$(".data_z_create_
Box").hide(300)
$_span1.remove()
})
clis++;
a++;
}
$(".iden_top ul li").click(function() {
$(this).css({
"background-color": "#fff","border-bottom": "1px solid #fff"
}).children("div").addClass("iden_top_dete");
$(this).children("span").addClass("iden_top_button")
$(this).siblings().css({
"background-color": "#eee","border-bottom": "1px solid #ccc"
}).children("div").removeClass("iden_top_dete");
$(this).siblings().children("span").removeClass("iden_top_button");
$(".iden_top ul li:eq(0)").children("div").removeClass("iden_top_dete");
$(this).children(".iden_add_name").addClass("ll");
$(this).siblings().children(".iden_add_name").removeClass("ll");
})
})
})
