This pop-up layer is often needed in BS projects.
Doing this kind of pop-up layer will generally encounter the following issues:
0, the pop-up layer must be defined below the input display.
1, click Input to eject the div layer.
2. Click anywhere outside the div layer to close the div layer.
3,ie6 the div layer with the drop-down box priority issue.
The following example is to solve these problems, we can refer to the reference, what better solution, please leave a message.
Super Simple version Demo:
Http://cssrain.cn/demo/popDiv/easyPopDiv.html
Demo Version:
Http://cssrain.cn/demo/popDiv/popDiv.html
Download:
Http://cssrain.cn/demo/popDiv/popDiv.rar
Features of this popup box:
1, the pop-up layer appears below the text box.
2. Click inside the pop-up layer without closing the layer and click outside to close the popup layer.
3,ie6 still cover the drop-down box.
The problems and solutions that were encountered at the time:
1, get the height of the text box, originally used. Height (), the results found that there is a problem, border, etc. are not counted in, and later instead. Outerheight (true) resolves.
2, prevent the event bubbling, the original return false; The result of the multi-box is not selected,
Because return false includes E.stoppropagation () and E.preventdefault (), E.preventdefault () blocks the default action of the element,
So the multi box cannot be selected. When you switch to E.stoppropagation (), everything is fine.
The difference between 3,$ ("Body") and $ (document), because the height of the body is unknown, causes the click () event to be invalid and changed to $ (document) to resolve.
4,ie6, the layer with the dropdown box problem, the use of Jquery.bigframe plug-in solution.
This article is from cssrain.cn original link: http://www.cssrain.cn/article.asp?id=1317