Using jquery to solve the problem with pop-up layers

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.