@xunuo
2018-08-10T11:06:23.000000Z
字数 1336
阅读 921
前端
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script src="easyui/jquery.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
var onbtn = document.getElementById('btn');
var onDelete = document.getElementById('delete');
var onInfo = document.getElementById('info-box');
var onCover = document.getElementById('background-cover');
onbtn.onclick = function() {
onInfo.style.display = 'block';
onCover.style.display = 'block';
onInfo.style.zIndex = 1;
};
onDelete.onclick=function(){
onInfo.style.display='none';
onCover.style.display='none';
}
$('#delete').linkbutton({
iconCls: 'icon-no'
});
}
</script>
</head>
<body>
<div>
<button id="btn">click me</button>
</div>
<div id="info-box" style="position:absolute; width:400px;height:400px;margin: 500px 500px;display: none;">
<div id="box-header" style="width:400px;height:50px;background-color:#FFFFFF;text-align: center;">
hello
<a id="delete" style="float: right;"></a>
</div>
<div id="box-content">
hi
</div>
</div>
<div id="background-cover" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #000;opacity: 0.5;display: none;"></div>
</body>
</html>