Div solution blocked by select

Last Update:2018-12-07 Source: Internet

Author: User

Tags microsoft frontpage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In IE, select is a window control, which blocks all non-window controls.
It can be understood that components such as Div are used in the client area of the browser. Code "Rendered,
They are rendered on the painting surface of the customer area,
Select is a standard Windows Control, which is only placed as a sub-control of the customer zone,
It will cover everything that is "painted" on the surface of all customer areas, but it does not necessarily cover other types of window controls,
For example, IFRAME and other select statements can be understood naturally if you have used an environment similar to Delphi. IE7 solves such bugs.

There are many methods;
1. Modify the SELECT statement. You do not need to use the standard SELECT statement. Instead, you can use other HTML elements to simulate the statement.
2. Modify Your Div and use IFRAME.
3. Hide select when div is displayed or when select is reached
4. In the Div or the same coordinate of the DIV, use an IFRAME of the same size to block it first, and then display the content of the DIV on the IFRAME.
5. The priority of the object is high, which can block the select box.

The following example shows how to sort online resources.

Site: http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html

Example of the 4th method: The best method: IFRAME is used as the bottom of the DIV

DIV is blocked by select, which is a common problem.
Some friends put the DIV content into IFRAME or object to solve the problem.
It is a pity that this will damage the structure of the page, and the interaction is not good.

The method used here is:

Although Div cannot directly cover select
However, div can cover IFRAME, while IFRAME can cover select,
Therefore, an IFRAME is used as the bottom of the div,
This Div can cover the SELECT statement.

<HTML>
<Head>
<SCRIPT>
Function divsetvisible (state)
{
VaR divref = Document. getelementbyid ('popupdiv ');
VaR ifrref = Document. getelementbyid ('divshim ');
If (state)
{
Divref. style. Display = "Block ";
Ifrref. style. width = divref. offsetwidth;
Ifrref. style. Height = divref. offsetheight;
Ifrref. style. Top = divref. style. Top;
Ifrref. style. Left = divref. style. Left;
Ifrref. style. zindex = divref. style. zindex-1;
Ifrref. style. Display = "Block ";
}
Else
{
Divref. style. Display = "NONE ";
Ifrref. style. Display = "NONE ";
}
}
</SCRIPT>
</Head>
<Body>
<Form>
<SELECT>
<Option> A select box is born... </option>
</SELECT>
</Form>
<Div id = "popupdiv" style = "position: absolute; top: 25px; left: 50px; padding: 4px; display: none; Background-color: #000000; color: # ffffff; Z-index: 100 ">
... And a div can cover it up <br/> through the help of an IFRAME.
</Div>
<IFRAME id = "divshim" src = "javascript: false;" scrolling = "no" frameborder = "0" style = "position: absolute; top: 0px; left: 0px; display: none; ">
</Iframe>
<Br/>
<Br/>
<A href = "#" onclick = "divsetvisible (true)"> click to show Div. </a>
<Br/>
<Br/>
<A href = "#" onclick = "divsetvisible (false)"> click to hide Div. </a>
</Body>
</Html>

Example of the 3rd method: the most direct method: Hide the drop-down box.

The following provides a general set of functions:

Test.htm

------------

<SCRIPT>
VaR hideelementtemp = new array ();
// Call this function when you click the menu. The menu object
Function cal_hideelementall (OBJ ){
Cal_hideelement ("IMG", OBJ );
Cal_hideelement ("select", OBJ );
Cal_hideelement ("object", OBJ );
Cal_hideelement ("iframe", OBJ );
}
Function cal_hideelement (strelementtagname, OBJ ){
Try {
VaR showdivelement = OBJ;
VaR calendardiv = OBJ;
VaR intdivleft = cal_getoffsetleft (showdivelement );
VaR intdivtop = cal_getoffsettop (showdivelement); // + showdivelement. offsetheight;
// Hideelementtemp = new array ()
For (I = 0; I <zookeeper Doc ument. All. Tags (strelementtagname). length; I ++ ){
VaR objtemp = zookeeper Doc ument. All. Tags (strelementtagname) ;
If (! Objtemp |! Objtemp. offsetparent)
Continue;
VaR export bjleft = cal_getoffsetleft (objtemp );
VaR export bjtop = cal_getoffsettop (objtemp );
If (Fig + objtemp. clientwidth)> intdivleft )&&
(Required bjleft <intdivleft + calendardiv. style. poswidth )&&
(Export bjtop + objtemp. clientheight> intdivtop )&&
(Export bjtop <intdivtop + calendardiv. style. posheight )){
// Var inttempindex = hideelementtemp. length; // The existing length.
// Save elementtagname is stutas
// Hideelementtemp [inttempindex] = new array (objtemp, objtemp. style. Visibility );
Hideelementtemp [hideelementtemp. Length] = objtemp
Objtemp. style. Visibility = "hidden ";
}
}
} Catch (e) {alert (E. Message)
}
}

Function cal_showelement (){
VaR I;
For (I = 0; I VaR objtemp = hideelementtemp
If (! Objtemp |! Objtemp. offsetparent)
Continue;
Objtemp. style. Visibility =''
}
Hideelementtemp = new array ();
}
Function cal_getoffsetleft (SRC ){
VaR set = 0;
If (SRC & SRC. Name! = "Divmain "){
If (SRC. offsetparent ){
Set + = SRC. offsetleft + cal_getoffsetleft (SRC. offsetparent );
}
If (SRC. tagname. touppercase ()! = "Body "){
VaR x = parseint (SRC. scrollleft, 10 );
If (! Isnan (x ))
Set-= X;
}
}
Return set;
}

</SCRIPT>
<SELECT> </SELECT>
<SELECT> </SELECT>
<Div style = "position: absolute; left: 0; top: 0; width: 100; Height: 100; Background-color: Red" onclick = "cal_hideelementall (this)">
Click to hide select
</Div>
<Br>
<Input type = "button" value = "click to show select" onclick = "cal_showelement ()">

In the preceding method, if the number of select boxes is small and relatively fixed, directly use obj. style. Visibility = "hidden" to hide them more directly.

2nd Methods: Using IFRAME as the carrier

The following is a simple example:

-----------

<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta name = "generator" content = "Microsoft FrontPage 4.0">
<Meta name = "progid" content = "FrontPage. Editor. Document">
<Title> simple menu </title>
<! --
Provides positioning functions. IFRAME is used as the carrier and will not be blocked by select.
By fason (2003-5-21)
-->
<Style id = s>
# Div1 {
Position: absolute;
Z-index: 100;
Width: 100;
Height: 130;
Background-color: # d2e8ff;
Border: 1 solid black;
}
Div {cursor: hand; font-size: 12px ;}
A {text-Decoration: none; color: red; font-size: 12px}
</Style>
</Head>
<Body>
<SCRIPT>
Function window. onload (){
VaR shtml = div1.innerhtml;
VaR IFM = Document. createelement ("<IFRAME frameborder = 0 marginheight = 0 marginwidth = 0 hspace = 0 vspace = 0 scrolling = NO> </iframe> ")
IFM. style. width = div1.offsetwidth
IFM. style. Height = div1.offsetheight
IFM. Name = IFM. uniqueid
Div1.innerhtml = ""
Div1.appendchild (IFM)
Response response frames[ifm.name).doc ument. Write (S. outerhtml + "<body leftmargin = 0 topmargin = 0>" + shtml + "</body> ")
}

Function show (){
With (document. All. img1 ){
X = offsetleft;
Y = offsettop;
Objparent = offsetparent;
While (objparent. tagname. touppercase ()! = "Body "){
X + = objparent. offsetleft;
Y + = objparent. offsettop;
Objparent = objparent. offsetparent;
}
Y + = offsetHeight-1
}
With (document. All. div1.style ){
Pixelleft = x
Pixeltop = y
Visibility =''
}
}
Function hide (){
Document. All. div1.style. Visibility = 'den den'
}
</SCRIPT>
<br> <SELECT> </SELECT>
<Div id = div1 onmouseover = "style. Visibility ='' "onmouseout =" style. Visibility = 'den den '"style =" visibility: hidden; ">
<Div href = "http://www.csdn.net" onmouseover = "style. backgroundcolor = 'highlight'" onmouseout = "style. backgroundcolor ='' "onclick =" window. Open (href) "> China Program Member </div>
<Div href = "http://www.sohu.com" onmouseover = "style. backgroundcolor = 'highlight' "onmouseout =" style. backgroundcolor = ''" onclick = "window. open (href) "> Sohu </div>
</Div>
</Body>
</Html>

5th methods: the priority of the object is high, and the select box can be blocked.

<Object ID = AA style = "display: none; Z-index: 1000; position: absolute; top: 0; left: 0; width: 152; Height: 200; "type =" text/X-scriptlet "Data =" about: <body> <Div style = 'position: absolute; left: 0; top: 0; width: 152; height: 200; Font: 14; color: White; Background: black; Border: 1 solid black '> test </div> "> </Object>
<SELECT> <option> hellohellohellohello </SELECT> <button onclick = AA. style. Display = AA. style. Display = "NONE "? "": "NONE"> test </button>

Although this method is simple, it is not a good solution for complex layers.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More