我做了一个弹出层,点击的时候设为display:block就展示了,关掉的时候设为display:none。 可以关掉
但是那块区域后面的东西没法选了,改怎么办?
就是虽然内容部显示了,但实际上那个地方还在占着
就是隐藏了一样
代码如下:
js代码:
function show(el) {
var element = $(el)[0];
element.style.display = 'block';
element.style.color = '#FF0000';
element.style.zIndex = '999';
}
function close_box(obj){
obj.parentNode.style.display = 'none';
obj.parentNode.style.zIndex = '-999';
}function floatBox(posEL,element){
var posX,posY,pos,offTop;
var width = 300;
var width1 = 630;
var height = 280;
if(isIE){
pos = $(posEL)[0]//.childNodes[0];
offTop = -200;
}else{
pos = $(posEL)[0];
offTop = -210;
}
posX = Math.abs(pos.offsetLeft-width1);
posY = Math.abs(pos.offsetTop-offTop);
var box = $("#pop_window")[0];
box.style.position = 'absolute';
box.style.zIndex = 999;
box.style.top = posY + 'px';
box.style.left = posX + 'px';
box.style.width = width + 'px';
box.style.height = height + 'px';
var str ="<div class='png'><img onclick='close_box(this)' src='images/close.gif' class='hand' title='close' alt='close' id='floatBox_img' style='float:right;' />";
switch (element){
case 'shipping_info':
str += shipping_info;
break;
case 'payment_option':
str += payment_option;
break;
case 'questions':
str += questions;
break;
default : str += content;
break;
}
str += "</div>";
box.innerHTML = str;
show('#pop_window');
return false;
}
html代码
<div id="pop_window" style="display:none"></div>
<ul class="g_t_c" style="list-style:none;">
<li style="margin-top: 3px;"><a title="Shipping Methods" onclick="floatBox(this,'payment_option');" href="<?php echo $_SERVER['REQUEST_URI'];?>#"> <?php echo zen_image($template->get_template_dir('shipping.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'shipping.gif','Shipping Methods','','',' class="relative"');?></a></li>
<li style="margin-top: 3px;"><a title="Payment methods" onclick="floatBox(this,'shipping_info');" href="<?php echo $_SERVER['REQUEST_URI'];?>#"> <?php echo zen_image($template->get_template_dir('payment.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'payment.gif','Payment Methods','','',' class="relative"');?></a></li>
<li style="margin-top: 3px;"><?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_ASK_A_QUESTION, 'products_id='.$_GET['products_id']) . '\')">'.zen_image($template->get_template_dir('ask.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'ask.gif','Ask Questions About This Item','','',' class="relative"').'</a>';?></li>
<li style="margin-top: 3px;"><?php echo '<a href="'.zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id='.$_GET['products_id']). '">'.zen_image($template->get_template_dir('tell_a_friends.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'tell_a_friends.gif','Tell A Friends','','',' class="relative"').'</a>';?></li>
</ul>已经尝试过加zIndex,但是不行。也或许是我加的不对。
希望各位能够帮忙解决下,先谢谢大家了
但是那块区域后面的东西没法选了,改怎么办?
就是虽然内容部显示了,但实际上那个地方还在占着
就是隐藏了一样
代码如下:
js代码:
function show(el) {
var element = $(el)[0];
element.style.display = 'block';
element.style.color = '#FF0000';
element.style.zIndex = '999';
}
function close_box(obj){
obj.parentNode.style.display = 'none';
obj.parentNode.style.zIndex = '-999';
}function floatBox(posEL,element){
var posX,posY,pos,offTop;
var width = 300;
var width1 = 630;
var height = 280;
if(isIE){
pos = $(posEL)[0]//.childNodes[0];
offTop = -200;
}else{
pos = $(posEL)[0];
offTop = -210;
}
posX = Math.abs(pos.offsetLeft-width1);
posY = Math.abs(pos.offsetTop-offTop);
var box = $("#pop_window")[0];
box.style.position = 'absolute';
box.style.zIndex = 999;
box.style.top = posY + 'px';
box.style.left = posX + 'px';
box.style.width = width + 'px';
box.style.height = height + 'px';
var str ="<div class='png'><img onclick='close_box(this)' src='images/close.gif' class='hand' title='close' alt='close' id='floatBox_img' style='float:right;' />";
switch (element){
case 'shipping_info':
str += shipping_info;
break;
case 'payment_option':
str += payment_option;
break;
case 'questions':
str += questions;
break;
default : str += content;
break;
}
str += "</div>";
box.innerHTML = str;
show('#pop_window');
return false;
}
html代码
<div id="pop_window" style="display:none"></div>
<ul class="g_t_c" style="list-style:none;">
<li style="margin-top: 3px;"><a title="Shipping Methods" onclick="floatBox(this,'payment_option');" href="<?php echo $_SERVER['REQUEST_URI'];?>#"> <?php echo zen_image($template->get_template_dir('shipping.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'shipping.gif','Shipping Methods','','',' class="relative"');?></a></li>
<li style="margin-top: 3px;"><a title="Payment methods" onclick="floatBox(this,'shipping_info');" href="<?php echo $_SERVER['REQUEST_URI'];?>#"> <?php echo zen_image($template->get_template_dir('payment.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'payment.gif','Payment Methods','','',' class="relative"');?></a></li>
<li style="margin-top: 3px;"><?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_ASK_A_QUESTION, 'products_id='.$_GET['products_id']) . '\')">'.zen_image($template->get_template_dir('ask.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'ask.gif','Ask Questions About This Item','','',' class="relative"').'</a>';?></li>
<li style="margin-top: 3px;"><?php echo '<a href="'.zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id='.$_GET['products_id']). '">'.zen_image($template->get_template_dir('tell_a_friends.gif', DIR_WS_TEMPLATE, $current_page_base,'images/button'). '/' . 'tell_a_friends.gif','Tell A Friends','','',' class="relative"').'</a>';?></li>
</ul>已经尝试过加zIndex,但是不行。也或许是我加的不对。
希望各位能够帮忙解决下,先谢谢大家了
解决方案 »
- jqgrid都需要引用那些文件呢?
- 请问有MAC OS X上开发dashboard widget的达人能解答这个问题吗?
- 帮帮我呀,学生做项目中。。。
- javascript:history.back()问题
- 100分的技术难题
- 如何让页面只能在新窗口中打开,使用浏览器就无法访问?(100分)
- 有一个<input type="checkbox" name="id" value="1">组,实现对隐藏的另一个<input>的操作的javascript,怎么写?
- 怎样可以任意移动一个层,并始终定位于窗口的某个地方?
- 大家好:请问在javascript中如何,看内宾 还可以加分(要多少可以说(10-100))
- 急急啊
- JavaScript缺少对象,求助!急急急急急急!!!!
- jquery 的contextMenu插件是否能修改成左键单击?
style.visibility="visible";
var box = $("#pop_window")[0];
box.style.display = 'none';
box.style.zIndex = -999;
}