<!-- 彈出建立新課程的視窗 --> 
  <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block'">

<input type="button" value="建立新物品" id="creat_new">

  </a>




<div id="light" class="white_content">
建立資產 
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='none'; 
document.getElementById('fade').style.display='none'">
建立完畢點選這裡
</a>


<br>
<input type="text" placeholder="資產名" id="insert_name"><br>
<input type="text" placeholder="資產數量" id="insert_num"><br>
<input type="text" placeholder="資產價格" id="insert_price"><br>
<br>
<br> <input type="button" value="新增資產" id="insert"><br>
<br>
</div>
//周邊變暗
<!-- <div id="fade" class="black_overlay"></div> -->
JS


<script type="text/javascript">
//建立資產
$(document).on('click', '#insert', function(e) {
var name = $("#insert_name").val();
var num = $("#insert_num").val();
var price = $("#insert_price").val();
alert("name="+name+"num="+num+"=price="+price);
$.ajax({
url : "action_zcgl_creatgdzc",
type : "POST",
data : {
"zcgl.gdzc_name" : name,
"zcgl.gdzc_num" : num,
"zcgl.gdzc_price" : price

},
success : function(data) {
alert("資產建立成功");
$("#insert_name").val("");
$("#insert_num").val("");
$("#insert_price").val("");
}
});
});
</script>


CSS式樣


<style type="text/css">
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 88);
}


.white_content {
display: none;
position: absolute;
top: 5%;
left: 5%;
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>