前端开发
网络新概念，云计算、大数据、O2O、电商。。。。
网络新概念，云计算、大数据、O2O、电商。。。。
2017-05-15 09:49:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.main {margin-top:20px;margin-left: 20px;overflow: auto;background: #2daae2;}
.main div{margin-left: 30px;width: 500px;height: 200px;background: #00a877;}
.sub1 {text-align: left;}
.sub2 {text-align: center;}
.sub3 {text-align: right;}
.showbox{position:absolute;top:10px;left:-300px;z-index:9999;opacity:0;filter:alpha(opacity=0);background-color: wheat;width: 300px;height: 200px;}
</style>
<title>popup div demo</title>
</head>
<body>
<div id="main" class="main">
<div id="sub1" class="sub1">
<input type="button" id="btnshow1" name="btnshow1" value="显示1" onclick="btnshow_click()">
</div>
<div id="sub2" class="sub2">
<input type="button" id="btnshow2" name="btnshow2" value="显示2" onclick="btnshow_click()">
</div>
<div id="sub3" class="sub3">
<input type="button" id="btnshow3" name="btnshow3" value="显示3" onclick="btnshow_click()">
</div>
</div>
<div id="divmemo" class="showbox">
<div>
<ul>
<li>
备注：<input type="text" id="txt_memo" name="txt_memo" value="">
</li>
<li class="text-center">
<input type="button" class="btn btn-danger btn-sm" id="btnsubmit" name="btnmemo" value="确认" onclick="btnsubmit_click()">
<input type="button" class="btn btn-danger btn-sm" id="btncancel" name="btncancel" value="取消" onclick="btncancel_click();">
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function btnshow_click()
{
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
alert('x: ' + x + '\ny: ' + y);
$("#divmemo").css({'display':'','opacity':'100','top':y-30,'left':x+50});
}
function btncancel_click() {
$("#divmemo").css({'display':'none','opacity':'0'});
}
function btnsubmit_click()
{
alert("submit");
}
</script>