求大神满足小弟的好奇心啊 - java吧

level 7

java颖慧楼主

怎样在浏览器中弹出这种小窗口啊

2013年09月11日 05点09分 1

level 12

cysqll

div而已不是窗体

2013年09月11日 05点09分 2

cysqll

2个DIV 一个是展示注册一个是后面禁止操作的蒙布

2013年09月11日 05点09分

java颖慧

回复 cysqll :你有具体的代码没，我还不是很懂，我对这种效果蛮感兴趣的

2013年09月11日 05点09分

cysqll

回复 java颖慧 :等等我写一个例子

2013年09月11日 05点09分

java颖慧

回复 cysqll :谢谢啊不用了我刚在网上找到了一个例子

2013年09月11日 05点09分

level 9

gwg121212

一层遮罩，一层显示，也可以用模态窗口做，看你心情了。

2013年09月11日 05点09分 3

java颖慧

纯html做的出来吗

2013年09月11日 05点09分

gwg121212

回复 java颖慧 :配合js

2013年09月11日 05点09分

level 12

cysqll

body里面

<input type="button" value="显示" onclick="test()">

<div id="xs" class="div1">
<div class="div1_title">我是标题</div>
<div class="div1_dic">我是内容</div>
</div>

<div id="mb" class="div2"></div>

2013年09月11日 05点09分 4

level 7

java颖慧楼主

谢谢上面两位大神了，这是我根据你们的提示在网上找到的例子

2013年09月11日 05点09分 5

cysqll

基本套路都一样的

2013年09月11日 05点09分

level 12

cysqll

触发事件
function test(){
document.getElementById("xs").style.display= "block";
document.getElementById("mb").style.display= "block";
}
样式
.div2{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.div1{
position: absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-150px;
display:none;
background-color: white;
z-index:1002;
overflow: auto;
}
.div1_title{
width: 400px;
height: 30px;
background-color: blue;
border:#ccc 1px solid;
}
.div1_dic{
width: 400px;
height: 170px;
background-color: white;
}

2013年09月11日 05点09分 6

java颖慧

真是太感谢你了，我还是个学生正在培训java ，希望以后有问题能得到你的指点哦

2013年09月11日 05点09分

level 9

gwg121212

<html>
<head>
<style>

</style>
<script language="javascript">
function showWindow(){
if(document.getElementById("divWin"))
{
$("divWin").style.zIndex=999;
$("divWin").style.display="";
}
else
{
var objWin=document.createElement("div");
objWin.id="divWin";
objWin.style.position="absolute";
objWin.style.width="520px";
objWin.style.height="220px";
objWin.style.border="2px solid #AEBBCA";
objWin.style.background="#FFF";
objWin.style.zIndex=999;
document.body.appendChild(objWin);
}
if(document.getElementById("win_bg"))
{
$("win_bg").style.zIndex=998;
$("win_bg").style.display="";
}
else
{
var obj_bg=document.createElement("div");
obj_bg.id="win_bg";
obj_bg.className="win_bg";
document.body.appendChild(obj_bg);
}
var str="";
str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">弹出式窗口</span><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏
str+='<div class="winContent">这是一个页面内部弹出窗口，使用W3C的createElement()方法和appendChild()方法<br /> 用火狐打开可以拖动窗口(IE拖动可能有问题)</div>'; //窗口内容
$("divWin").innerHTML=str;
}
function closeWindow(){
$("divWin").style.display="none";
$("win_bg").style.display="none";
}
function $(o){
return document.getElementById(o);
}
function startMove(o,e){
var wb;
if(document.all && e.button==1) wb=true;
else if(e.button==0) wb=true;
if(wb)
{
var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);
var y_pos=parseInt(e.clientY-o.parentNode.offsetTop);
if(y_pos<=o.offsetHeight)
{
document.documentElement.onmousemove=function(mEvent)
{
var eEvent=(document.all)?event:mEvent;
o.parentNode.style.left=eEvent.clientX-x_pos+"px";
o.parentNode.style.top=eEvent.clientY-y_pos+"px";
}
}
}
}
function stopMove(o,e){
document.documentElement.onmousemove=null;
}
</script>
</head>
<body>
<a class="showWindow" href="javascript:showWindow()">点击这里</a>打开窗口<br />
</body>
</html>

2013年09月11日 05点09分 7

level 6

AlerXiaoTian

可用div 或者子窗体 js的 windows.open('url',xxxx)试试去

2013年09月11日 05点09分 8

java颖慧

谢谢解答，已找到实现方法

2013年09月11日 05点09分

level 7

java20130727

2013年09月11日 06点09分 9

level 7

java20130727

2013年09月11日 06点09分 10