<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=GBK" http-equiv="Content-Type" />
<title>无标题 1</title>
<style type="text/css">
#loader {
padding:0;
margin:0;
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:#ededed;
z-index:999;
display:none;
vertical-align:center;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
#top {
border:1px solid #cee3ff;
padding:0;
margin:0;
position:absolute;
top:100 ; left:300;
width:300px; height:200px;
background:#ededed;
vertical-align:center;
z-index:1000;
display:none;
text-align: center;
}
html,body{
margin:0px;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
var divMessage={
bottomId : "loader", //最底层DIV也就是全屏DIV
topId : "top", //顶层DIV
textAreaId : "textarea", //div中文本框ID
divBottom : function(){ //得到底层对象
return document.getElementById(this.bottomId);
},
divTop:function(){ //得到顶层对象
return document.getElementById(this.topId);
},
textObj:null,
textAreaObj:function(){ //得到区域对象
return document.getElementById(this.textAreaId);
}
}
divMessage.show=function(textObj){
divMessage.textObj = textObj;
document.getElementById(this.textAreaId).value=textObj.value;
divMessage.divTop().style.display ='block';
divMessage.divBottom().style.display ='block';
}
divMessage.hidden= function(){
divMessage.divTop().style.display ='none';
divMessage.divBottom().style.display ='none';
}
//点击DIV上的确定改变文本框的值
divMessage.changeObj=function(textId){
divMessage.textObj.value = document.getElementById(textId).value;
divMessage.hidden();
}
/**
* 以下三个函数操作SELECT可以给
* @param id为要操作的SELECT的ID
* 功能:可以 var sel =new SelOperate(id)
*/
function SelOperate(id)
{
this.id = id;
this.sel = document.getElementById(id);
}
/**
*清楚select中的选项 sel.clean();
*/
SelOperate.prototype.clean=function()
{
var length = this.sel.options.length;
while(length>0){
this.sel.removeChild(this.sel.options[0]);
length--;
}
}
/**
*增加select中的OPTION;
*/
SelOperate.prototype.add=function(selValue,selName)
{
var option = document.createElement("option");
option.setAttribute("value", selValue);
option.innerHTML= selName;
this.sel.appendChild(option);
}
/**
*将select符合条件的值选中
*/
SelOperate.prototype.selChecked=function(objValue){
for(var i = 0 ;i<this.sel.length;i++){
if(this.sel[i].value==objValue){
this.sel.options[i].setAttribute("selected",true);
}
}
}
/**********************************************/
function addOptions(){
var sel= new SelOperate("selTest");
sel.clean();
for(var i=0;i<5;i++){
sel.add("value"+1,"name"+i)
}
}
</script>
</head>
<body>
<div id="top">
<div id="title" style="height: 23px;padding:5px;background-image: url('<%=path%
>/ecgrid/images/gird/footerBg.gif');" >请输入提示信息</div>
<textarea id="textarea" style="width:100%;height:200px;border:0px;margin:1px;
overflow: auto;"></textarea>
<input type="button" name="确定" class="dataForm_button" value="确 定"
onclick="divMessage.changeObj('textarea')">
</div>
<div id="loader"><iframe frameborder="0" width="100%" height="100%" src=""></iframe></div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
<select id="selTest">
<option>哈哈哈哈</option>
</select>
<input type="text" value="show" onclick="divMessage.show(this)" >
<input type="button" value="show" onclick="addOptions()" >
</body>
</html>
分享到:
相关推荐
本案例聚焦于使用`div`元素实现弹出层的操作,这是一种轻量级且灵活的方法,适用于各种场景,如提示信息、表单提交、图像预览等。下面我们将详细探讨如何利用HTML、CSS和JavaScript来创建和控制弹出层。 首先,`div...
通过JavaScript或者jQuery,我们可以动态地构建和操作这些`div`元素,使其具有与`<select>`类似的功能,同时增强视觉效果和操作体验。 首先,我们需要创建一个包含所有单选选项的`div`容器。每个选项可以是一个独立...
本案例集主要探讨如何利用"div"配合CSS(层叠样式表)和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要,如消息提示、登录框、模态对话框等。 首先,我们来看"iframe的div遮罩层(可...
在这里,`div`将被用来构建弹出层,显示`select`的选项。开发者可以利用CSS来定制这个`div`的样式,包括颜色、大小、位置、过渡效果等,使其看起来像一个下拉菜单。 实现这种效果的基本步骤如下: 1. 创建一个`...
根据给定文件的信息,本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见,主要用于提供额外的信息展示或者操作界面,如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...
类似百度新闻页的省市两级菜单,点击输入框弹出层显示省,点击省再显示对应的地级市,取代select,省市是两级连动的,这是上一个代码的改写,页面调用比原来的简单,代码更清楚了,现在的有类别,省市,性别选择,...
如:我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...
在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...
例如,当用户点击`div`时,可以弹出一个模拟的下拉菜单,用户选择后更新`div`的显示内容。 2. **伪元素和CSS3**:利用CSS3的伪元素(如`:before`和`:after`)和过渡(transition)、动画(animation)等特性,可以...
1. **修改CSS**:为弹出窗口的div添加一个更高的z-index值。然而,由于IE6的限制,这可能不足以解决问题。还需要确保select元素的z-index低于dialog。 2. **隐藏select元素**:当弹出窗口显示时,可以使用...
在Web开发中,模拟select元素的点击事件是一项常见的需求,尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下,模拟select的点击事件。 ### 标题知识...
在这个项目中,“弹出有遮罩的拖动层,简单模拟select(未做界面)”是一个实例,它展示了如何利用这些技术实现一个功能性的UI组件。 首先,让我们详细了解这个项目的组成部分: 1. **遮罩层**:遮罩层是一种常见...
JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计,它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成,使得用户...
在IT行业中,交互设计是用户体验的关键部分,"select option"的选择项交互是网页或应用程序界面设计中的常见元素。本文将围绕“select option”及其相关的鼠标提示功能进行详细讲解。 "Select option"通常指的是...
这在网页设计中是一个常见的兼容性问题,尤其是在尝试创建弹出窗口或浮动元素时。本文将详细介绍如何通过JavaScript来解决这个特定的IE6浏览器中的问题。 首先,我们需要理解IE6的层叠上下文(Stacking Context)...
“旋转形式弹出”的二级菜单可能是通过CSS3的`transform: rotate()`实现的,这允许菜单项在展开时以特定的角度旋转,从而创造出引人注目的动画效果。同时,`transform-origin`属性可以调整旋转的中心点,以实现更...
2. **创建弹出层结构**:在HTML中,我们可以创建一个隐藏的弹出层元素,如`<div>`,并添加样式使其在默认情况下不可见。这个弹出层将用于显示时间选择器。 3. **定义时间选择器**:可以使用现成的jQuery插件,如`...
在网页开发中,jQuery弹出层(也称为模态窗口或对话框)是一种常见的交互设计技术,用于在用户与页面的其他部分互动时提供额外的信息或功能。这种技术可以用于登录、注册、确认操作、显示详细信息等多种场景,极大地...
接下来,我们需要用JavaScript来控制弹出层的显示与隐藏。可以绑定一个事件监听器到触发弹出层的元素,比如按钮: ```javascript document.getElementById('openCitySelect').addEventListener('click', function()...