急等,如何用JS与CSS实现:在页面点击文字弹出DIV层效果,注意DIV层在文字旁边?
补充:
JS方法里能实现多个DIV层效果,当点击其它文字时,弹出来的DIV层只能是该文字下的DIV内容。
其他DIV层内容隐藏。
弹出DIV层一定要在文字旁边上方显示,而且DIV层里有可以点击关闭功能和内容显示?
[b]问题补充:[/b]
你贴出的例子
这从哪里找呀?
[b]问题补充:[/b]
我进你的空间没有看见呀
[b]问题补充:[/b]
发个实例过来呀?我现在正在做,就是不成功呀?
[b]问题补充:[/b]
我没有看见呀,在哪里呀?
[b]问题补充:[/b]
看见了,我先试试呀?谢谢
[b]问题补充:[/b]
我的妈呀,不是这种?
我要的是弹出层?
[b]问题补充:[/b]
补充:
点击页面不同的查看详细文字,就显示出不同的DIV层?
1,
在以下方法里弹出层方法
function testMessageBox1(ev)
{
var objPos = mousePosition(ev);
messContent =”“
showMessageBox('要要',messContent,objPos,580,100);
}
我想把div显示与隐藏用这个方法控制:
function dis(){
var t=document.getElementsByTagName("div");
for(i=0;i<t.length;i++){
if(t[i].style.background=="#fffffe")
{
t[i].style.display="none";
}
else
{ t[i].style.display="block";
}
}
}
2,页面如下:
[b]问题补充:[/b]
不过我这个弹出层好像有问题,
就是显示出来的DIV层它有时看不见?
你帮我全部在页面居中显示也可以?
先说谢谢了?
[b]问题补充:[/b]
问题在于我弹出层的JS脚本:
帮我看看:
可不可以改:
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow"; /*控制弹出层TITLE的类*/
mesW.innerHTML="
color:#ffffff;'>
"+wTitle+" <input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭'/>
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//让背景渐渐变暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity <endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al <(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
function testMessageBox1(ev)
{
var objPos = mousePosition(ev);
messContent="
组织两年内即将退休员工人数为 |
showMessageBox('数为',messContent,objPos,580,0);
[b]问题补充:[/b]
不知道兼容否:
都可以啦?你以前有做过类似的嘛?
有些网站上有点击人的头像,就会出现他的相关信息,也可以操作相关信息。
就是类似这种的效果?
[b]问题补充:[/b]
能不能改改呢?
我做这个都用了几天了,都快风掉了?
[b]问题补充:[/b]
你能帮我把它写全点嘛?
如果你有新的方法?
:arrow:
建议lz
使用一个全局的js文件对这些类似的问题作个初始化
比如一个id为demoDiv的
使用如下初始化
[code="js"]
if(!document.getElementById("demoDiv"))
{
document.write("
}
[/code]
lz可以看看我贴出的例子
应该满足lz的要求的吧
[code="html"]
<br> #tabnav { <br> background:#ffffff; <br> /*border-bottom:1px solid #333;*/ <br> padding-bottom:0px; <br> } </p> <p>#tabnav ul { <br> padding:10px 0px 5px 0px; <br> margin:5px 0px 5px 0px; <br> list-style:none; <br> background:#ffffff; <br> border-bottom:1px solid #999; <br> } </p> <p>#tabnav ul li { <br> display:inline; <br> margin-left:1px; <br> } </p> <p>#tabnav ul li a { <br> background:#E7E7E9;<br><br> padding:5px 10px 5px 10px; <br> border:1px solid #999; <br> TEXT-DECORATION: none<br> } </p> <p>/*#tabnav ul li a:hover { <br> background:#ccc;<br><br> } */</p> <p>#tabnav ul li a.here { <br> background:#ffffff; <br> padding:5px 10px 5px 10px; <br> border-top:1px solid #999; <br> border-left:1px solid #999; <br> border-right:1px solid #999; <br> border-bottom:0px solid #E7E7E9;<br> TEXT-DECORATION: none <br> } </p> <p>#tabnav ul li a:hover { <br> color:#000080; <br> } <br>
Address
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
<script language="javascript">
function onchangetab(tableid){
var foreignaddr = document.getElementById('foreignaddr');
var homeaddr = document.getElementById('homeaddr');
var officeaddr = document.getElementById('officeaddr');
var billaddr = document.getElementById('billaddr');
var a_foreignaddr = document.getElementById('a_foreignaddr');
var a_homeaddr = document.getElementById('a_homeaddr');
var a_officeaddr = document.getElementById('a_officeaddr');
var a_billaddr = document.getElementById('a_billaddr');
if(tableid=='foreignaddr') {
foreignaddr.style.display='';
billaddr.style.display='none';
homeaddr.style.display='none';
officeaddr.style.display='none';
a_foreignaddr.className='here';
a_billaddr.className='';
a_homeaddr.className="";
a_officeaddr.className="";
}else if(tableid=='billaddr') {
billaddr.style.display='';
foreignaddr.style.display='none';
homeaddr.style.display='none';
officeaddr.style.display='none';
a_billaddr.className='here';
a_foreignaddr.className='';
a_homeaddr.className="";
a_officeaddr.className="";
}else if(tableid=='homeaddr') {
homeaddr.style.display='';
foreignaddr.style.display='none';
billaddr.style.display='none';
officeaddr.style.display='none';
a_homeaddr.className='here';
a_foreignaddr.className='';
a_billaddr.className="";
a_officeaddr.className="";
}else if(tableid=='officeaddr') {
officeaddr.style.display='';
foreignaddr.style.display='none';
homeaddr.style.display='none';
billaddr.style.display='none';
a_officeaddr.className='here';
a_foreignaddr.className='';
a_homeaddr.className="";
a_billaddr.className="";
}
}
onchangetab("billaddr");
[/code]
这是我之前做的一个项目中的某个页面的一个片段
呵呵
其实主要还是用JavaScript和css来控制
这个不可以吗?
直接另存为 html文件 就可以使用了啊
……
在我的回答里面啊
重贴一遍
把这段代码copy了,另存为一个html文件 就可以看效果了
[code="html"]
<br> #tabnav { <br> background:#ffffff; <br> /*border-bottom:1px solid #333;*/ <br> padding-bottom:0px; <br> } </p> <p>#tabnav ul { <br> padding:10px 0px 5px 0px; <br> margin:5px 0px 5px 0px; <br> list-style:none; <br> background:#ffffff; <br> border-bottom:1px solid #999; <br> } </p> <p>#tabnav ul li { <br> display:inline; <br> margin-left:1px; <br> } </p> <p>#tabnav ul li a { <br> background:#E7E7E9;<br><br> padding:5px 10px 5px 10px; <br> border:1px solid #999; <br> TEXT-DECORATION: none<br> } </p> <p>/*#tabnav ul li a:hover { <br> background:#ccc;<br><br> } */</p> <p>#tabnav ul li a.here { <br> background:#ffffff; <br> padding:5px 10px 5px 10px; <br> border-top:1px solid #999; <br> border-left:1px solid #999; <br> border-right:1px solid #999; <br> border-bottom:0px solid #E7E7E9;<br> TEXT-DECORATION: none <br> } </p> <p>#tabnav ul li a:hover { <br> color:#000080; <br> } <br>
Address
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
Block | Street* | ||||
Floor | Unit | ||||
Building | Postal Code* | ||||
Address | |||||
<script language="javascript">
function onchangetab(tableid){
var foreignaddr = document.getElementById('foreignaddr');
var homeaddr = document.getElementById('homeaddr');
var officeaddr = document.getElementById('officeaddr');
var billaddr = document.getElementById('billaddr');
var a_foreignaddr = document.getElementById('a_foreignaddr');
var a_homeaddr = document.getElementById('a_homeaddr');
var a_officeaddr = document.getElementById('a_officeaddr');
var a_billaddr = document.getElementById('a_billaddr');
if(tableid=='foreignaddr') {
foreignaddr.style.display='';
billaddr.style.display='none';
homeaddr.style.display='none';
officeaddr.style.display='none';
a_foreignaddr.className='here';
a_billaddr.className='';
a_homeaddr.className="";
a_officeaddr.className="";
}else if(tableid=='billaddr') {
billaddr.style.display='';
foreignaddr.style.display='none';
homeaddr.style.display='none';
officeaddr.style.display='none';
a_billaddr.className='here';
a_foreignaddr.className='';
a_homeaddr.className="";
a_officeaddr.className="";
}else if(tableid=='homeaddr') {
homeaddr.style.display='';
foreignaddr.style.display='none';
billaddr.style.display='none';
officeaddr.style.display='none';
a_homeaddr.className='here';
a_foreignaddr.className='';
a_billaddr.className="";
a_officeaddr.className="";
}else if(tableid=='officeaddr') {
officeaddr.style.display='';
foreignaddr.style.display='none';
homeaddr.style.display='none';
billaddr.style.display='none';
a_officeaddr.className='here';
a_foreignaddr.className='';
a_homeaddr.className="";
a_billaddr.className="";
}
}
onchangetab("billaddr");
[/code]
可不可以详细介绍一下背景
我看能不能写一个给你
首先把div的style.position改为"absolute"
然后使用div.style.visibility[显示""/隐藏"hidden"]来控制试试
可不可以把运行时创建 改为一开始就是用document.write写好
对啊
类似一个上下文菜单的东西
我之前遇到同样的问题
就是在运行时才使用document.createElement,结果有问题
而改为初始化时就是用document.write来创建就可以了
俺也很费解~