让Bootstrap3的菜单位于Iframe之上

来源：互联网发布：光纤网络布线编辑：程序博客网时间：2024/05/16 09:08

一般情况下，Bootstrap的菜单可以由如下方法创建：

<div class="dropdown">  <a data-toggle="dropdown" href="#">单击我显示菜单</a>  <ul class="dropdown-menu" role="menu">    <li><a class="menuitem" tabindex="-1" href="#">菜单项1</a></li>    <li><a class="menuitem" tabindex="-1" href="#">菜单项2</a></li>    <li><a class="menuitem" tabindex="-1" href="#">菜单项3</a></li>  </ul></div>

但是有些时候，dropdown的外层容器并非DIV（可能是li或者其他元素），或者菜单DIV被设置了大小，或者菜单需要位于带有z-index的元素之上，这个时候可以使用绝对定位创建菜单。

menuHtml = '<div class="dropdown" style="position:absolute" id="nav_toggler_wrap">';menuHtml += '<a data-toggle="dropdown" id="nav_toggler"></a>';menuHtml += '<ul class="dropdown-menu" role="menu">'menuHtml += '<li><a class="menuitem">关闭所有选项卡</a></li>';menuHtml += '</ul>';menuHtml += '</div>';$("body").append(menuHtml);

因为是绝对定位，这里菜单可以放在任何位置，如果iframe被设置了z-index,dorpdown也要设置。为了方便触发了调整菜单的位置，这里给菜单 Wrap和触发的元素都设置了ID。

然后，在需要触发的位置：

obj.on('click',function(e){e.stopPropagation();//必须有 否则菜单弹出后会立刻消失var _this = $(this);if(_this.hasClass("navigation-item-options-menu-button")){var pos = GetAbsPos(this);$("#nav_toggler_wrap").css({"top":pos.top+32,"left":pos.left});$("#nav_toggler").dropdown("toggle");}});

GetAbsPos是一个函数，用于获得某元素的绝对坐标

function get_abs_position(obj){var o = $(obj);var obj_x = o.offset().left;var obj_y = o.offset().top;while(o.attr("parentNode")){o = o.parent();obj_x += o.offset().left;obj_y += o.offset().top;}var p = {"left":obj_x,"top":obj_y};return p;}

这样，当点击按钮时，菜单就会弹出了，实际上，Bootstrap的菜单非常简单，只需要给dropdown所在的元素添加类open，菜单就会展开。效果如下：

0 0