让Bootstrap3的菜单位于Iframe之上

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

  单击我显示菜单
  

    
菜单项1
    
菜单项2
    
菜单项3
  

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

menuHtml = '
';
menuHtml += '';
menuHtml += '
'
menuHtml += '
关闭所有选项卡
';
menuHtml += '
';
menuHtml += '
';
$("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，菜单就会展开。效果如下：