用 iframe 解决下拉框与层之冲突

2016-01-29 11:48 60 1 收藏

用 iframe 解决下拉框与层之冲突,用 iframe 解决下拉框与层之冲突

【 tulaoshi.com - Html 】

 

  问题提出:我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图示如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

  解决问题:由于层与下拉框之间的优先级是:下拉框  层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下:

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;"
 <table
 <tr<tditem 1 <tr<tditem 2 <tr<tditem 3 <tr<tditem 4 <tr<tditem 5visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"

<a href="#" onclick="document.getElementById('menu').style.visibility='visible'"menu

<form
 <select<optionA form selection list 

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1483420.html

延伸阅读
标签: Web开发
HTML HEAD titleAjax实现无刷新三联动下拉框/title meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" meta content="C#" name="CODE_LANGUAGE" meta content="JavaScript" name="vs_defaultClientScript" meta content="http://schemas.microsoft.com/intellis...
标签: Web开发
代码如下:             function divPosition(){                 var clx,cly;                &...
标签: Web开发
1.此代码适合所有下拉列表取值 2.一个项目所有的下拉列表只需要这一个公用方法; 步骤一:创建实体bean ; 代码如下: public class DictionaryBean { private String value_Id;//下拉框option的id private String value;//下拉框option的值 private String flag;//对应下拉框的值的类型,如flag=1,下拉列表为省份信息,flag=2为市级...
标签: Web开发
代码如下: //==========测试代码=============== head runat="server" title下拉框测试/title script type="text/javascript" src="/js/jquery/jquery-1.3.js"/script script type="text/javascript" $(function(){ var $city= $("#ddlCity"); //填充一些数据 for(var i=1;i=10;i++){ $city.append($("option/").attr("value",i).t...
{* 单元说明:      递归清空窗体上 所有文本框,下拉框中的文本。 作者        :     笔名:易  一    英文名:yeeyee E-Mail      :    jane1437@163.com 创建时间:&...

经验教程

671

收藏

63
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部