`
wenson
  • 浏览: 1052188 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

扫盲:select下拉框遮住div层的解决方法(用iframe解决)

    博客分类:
  • web
阅读更多

select下拉框遮住div层的解决方法(用iframe解决)

在层里放一个比select级别高的iframe就可以了

 

<div id=”menu” style=”position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;”>
  <table>
  <tr><td>item 1</td></tr>
  <tr><td>item 2</td></tr>
  <tr><td>item 3</td></tr>
  <tr><td>item 4</td></tr>
  <tr><td>item 5</td></tr>
  </table>
  <iframe src=”javascript:false” style=”position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;”></iframe>
</div>



<a href=”#” onclick=”document.getElementById(’menu’).style.visibility=’visible’”>menu</a>
<form>
  <select><option>A form selection list</option></select>
</form>
 

 

分享到:
评论

相关推荐

    select 下拉框可以多选

    此外,对于复杂的多选下拉框需求,例如需要分组或者更丰富的交互,可以考虑使用插件或库,如Chosen、Select2等。这些库提供了更多的功能,如搜索、分组、自定义模板等,并且可以很好地适应各种屏幕尺寸,提高了...

    select下拉框添加搜索功能

    在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...

    DIV模拟select下拉框

    文件名为"DIV模拟select1"可能是一个示例项目或代码文件,用于演示如何使用jQuery和CSS创建这样一个模拟下拉框。在实际操作中,通常会包含HTML结构、CSS样式表和JavaScript脚本。HTML部分可能包含一个父级&lt;div&gt;元素...

    为select下拉框添加滚动条

    当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不...本次上传的代码将提供一种方法将select下拉框添加滚动条

    JQuery实战第五讲:级联下拉框效果

    JQuery实战第五讲:级联下拉框效果,如果用在《MVC中更加合适

    jQGrid动态填充select下拉框的选项值(动态填充)

    例如,我们将`edittype`设置为`"select"`,以使用下拉框编辑器。 ```javascript colModel: [ { name: "column1", index: "column1", editable: true, edittype: "select" }, // 其他列... ] ``` 2. **定义`...

    jQuery Select下拉框美化插件 菜单淡如淡出动画

    尽管现在的浏览器更新换代后更加强大,浏览器默认控件也逐渐变得美观起来,特别是Select下拉框,已经不再是以前IE6那样的丑陋了。但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件,它完全重写了...

    纯js超酷select下拉框美化插件

    为了解决这个问题,开发者们创造了各种各样的插件,其中`tastySelect`就是一款专门用于美化Select下拉框的纯JavaScript插件。 **TastySelect插件特点:** 1. **纯JavaScript实现**:TastySelect不依赖任何大型的...

    纯Css更改Select下拉框样式

    纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...

    jQuery select下拉框美化代码.zip

    `jQuery select下拉框美化代码.zip`这个压缩包提供了一种解决方案,旨在提升传统HTML `&lt;select&gt;` 元素的视觉效果。下面将详细探讨这个主题。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

    div模拟select自定义下拉列表框(jQuery)

    一、为什么使用div模拟select 原生的HTML `&lt;select&gt;`元素虽然易于使用,但在样式定制和交互性方面存在局限。例如,浏览器对于`&lt;select&gt;`的样式控制有限,无法像其他HTML元素那样自由地改变外观。此外,`&lt;select&gt;`的...

    Javascript 操作select下拉框

    下面将详细介绍如何使用 JavaScript 来操作 `select` 下拉框中的选项。 #### 1. 检查 Select 下拉框中是否存在特定值 (jsSelectIsExitItem) ```javascript function jsSelectIsExitItem(objSelect, objItemValue) ...

    搜索功能select下拉框实现自动匹配

    带搜索功能的select下拉框,类似百度google的搜索框,自己匹配,很好用

    写一个可编辑的select下拉框

    ### 可编辑Select下拉框实现方法 #### 一、引言 在现代Web开发中,用户界面(UI)的设计对于提升用户体验至关重要。一个常见的需求是实现一个可编辑的`&lt;select&gt;`下拉框,即允许用户不仅能从下拉列表中选择选项,还...

    bootstrap select 下拉框通过拼音搜索汉字

    在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中,我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能,这对于中文环境下的用户体验提升有着显著的作用。 首先,我们要了解Bootstrap...

    如何获取select下拉框的值(option没有及有value属性)

    如何获取select下拉框的值: 1.下拉框的option没有value属性时 代码如下: &lt;select id=”param1″&gt; 学号&lt;/option&gt; 姓名&lt;/option&gt; 年龄&lt;/option&gt; &lt;/seclect&gt; [removed] [removed] = funciton(){ var param = ...

    80、jquery select下拉框美化代码

    为了解决这个问题,开发者可以借助jQuery插件或自定义CSS和JavaScript来实现下拉框的美化。下面将详细介绍这个过程。 1. **jQuery Select Plugins**: - **Chosen**:Chosen是一个流行的jQuery插件,它提供了可...

    select下拉框支持搜索【中文搜索】文件

    在网页设计和开发中,`select` 下拉框是一个常见的元素,用于用户选择预设的选项。然而,当选项数量庞大或包含大量中文文本时,传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验,我们可以...

Global site tag (gtag.js) - Google Analytics