让Bootstrap3的菜单位于Iframe之上

一般情况下，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，菜单就会展开。效果如下：