`

模拟模态对话框的DIV

JavaScriptHTML 
阅读更多

最近项目中用到一个模拟模态对话框的DIV的实现，有两个层，下面的层是半透明的，将遮盖整个窗口，上面的层则用于用户输入信息，这里是一个简单的模仿。

 

以下是页面代码：

 

<html>
<head>
<title>Demo</title>

</head>
<body>
<table>
<tr>
 <td colspan="3"><input type="button" value="新增" name="" onclick="selectClass();"/></td>
</tr>
</table>
<div id="div1" style="display:none; background-color:#000; filter:alpha(opacity=30);opacity:0.3; width:1024px; height:768px; z-index:10; position: absolute;left:0px; top:0px;">
	</div>
	<div id="div2" style="display:none; background-color:#FFF; width:300px; height:180px;  z-index:20; position: absolute; left:300px; top:150px;">
		<table>
			<tr>
				<td>交易类型</td>
				<td>
					<select name="sel1" value="">
						<option value="">--选择交易类型--</option>
						<option>存款</option>
						<option>查询</option>	
						<option>汇款</option>	
						<option>取款</option>	
					</select>
				</td>
			</tr>
			<tr>
				<td>分类/对象</td>
				<td>
					<select name="sel2" value="" onchange="showSel3(this.value);">
						<option value"">--选择分类--</option>
						<option value="0">对手</option>
						<option value="1">对象</option>	
					</select>
				</td>
			</tr>
			<tr>
				<td id="td1">&nbsp;</td>
				<td id="td2">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" value="确定" name="confirm" onclick="confirm(true);">&nbsp;&nbsp;<input type="button" value="取消" name="cancel" onclick="confirm(false);"></td>
			</tr>
		</table>
	</div>
</body>
</html>

 

以下是javaScript代码：

 

<script>
//显示层
	function selectClass(){
		document.getElementById("div1").style.display="block";
		document.getElementById("div2").style.display="block";
	}

//显示对手名称/对象分类
	function showSel3(val){
		var strArr =strList();
		var td1HTML=document.getElementById("td1");
		var td2HTML=document.getElementById("td2");
		var td1Value="";
		var td2Value="";
		if(val!=""){
			if(val=="0"){
				td1Value="对手名称："
				td2Value="<input name='' type='text' value=''/>"
				td1HTML.innerHTML=td1Value;
				td2HTML.innerHTML=td2Value;
			}else{
				td1Value="对手分类："
				td2Value="<select name=''><option value=''>--请先把对手分类--</option>";
				for(var str in strArr){
					td2Value+="<option value='"+str+"'>"+strArr[str]+"</option>";
				}
				td2Value+="</select>";
				td1HTML.innerHTML=td1Value;
				td2HTML.innerHTML=td2Value;
			}

		}else{
			td1HTML.innerHTML="";
			td2HTML.innerHTML="";
		}
	}








	     //确定或消信息的输入

        function confirm(flag){
		if(flag){
		document.getElementById("div1").style.display="none";
		document.getElementById("div2").style.display="none";
		//传递数据
		}else{
		document.getElementById("div1").style.display="none";
		document.getElementById("div2").style.display="none";
		//清空数据
		document.getElementById("sel1").value="";
		document.getElementById("sel2").value="";
		document.getElementById("td1").innerHTML="";
		document.getElementById("td2").innerHTML="";
		}
	}



</script>

 

 运行效果如下：

 



 

 

 

 

 

 

  • 大小: 9.1 KB
0
顶
1
踩
分享到：
| FreeMarker在java项目中的应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现div模拟模态对话框展现URL内容.pdf

    js实现div模拟模态对话框展现URL内容

    js实现div模拟模态对话框展现URL内容

    本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考，具体如下： [removed] function sAlert&#40;str&#41;{ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口...

    JavaScript实现模态对话框实例

    在示例中，对话框div的z-index属性设置为1002，使其能够显示在其他元素之上。 8. 透明度控制：为了增强模态对话框的视觉效果，可以通过调整元素的透明度来创建半透明的遮罩层。示例中的遮罩层div设置了0.1的opacity...

    javascript模态对话框

    JavaScript模态对话框是网页交互中的重要组成部分，它允许用户在执行特定操作或查看关键信息时保持当前页面的上下文。这种技术常用于确认操作、显示警告信息、输入数据等场景。本文将深入探讨JavaScript模态对话框的...

    自己做的模拟模态对话框实现代码

    为了解决这个问题，开发者决定创建一个自定义的模拟模态对话框。 模态对话框是一种阻止用户与页面其余部分交互，直到他们与对话框交互完毕的界面元素。在IE9中，原生的模态对话框可能无法满足需求，因此需要自己...

    div模拟的showmodeldialog

    在网页设计和开发中，"div模拟的showModelDialog"是一种常见的技术，它利用HTML的`&lt;div&gt;`元素来创建可自定义的模态对话框。这种方法的优点在于它灵活、可定制性强，开发者可以根据需要调整对话框的外观、大小、位置...

    DIV 实现showModalDialog效果，绝对赞

    然而，由于这个API在各个浏览器中的实现不一致，且存在一些兼容性问题，开发者逐渐转向使用`div`来创建自定义模态对话框。 要使用`div`实现类似的效果，我们需要以下几个步骤： 1. **HTML 结构**：创建一个隐藏的`...

    模拟网页对话框

    【模拟网页对话框】是一种在Web开发中常见且重要的技术，它允许开发者在不离开当前页面的情况下与用户进行交互，提供了类似系统对话框的用户体验。本文将深入探讨模拟网页对话框的相关知识点，包括其实现原理、常用...

    jQuery弹出对话框及提示代码

    - `modal`：设置是否为模态对话框，阻止用户与对话框外的元素交互。 - `buttons`：定义一组按钮及其点击时执行的函数。 - `autoOpen`：设置对话框是否在页面加载时自动打开。 - `closeOnEscape`：设置是否允许...

    js 创建div层

    此div用于模拟模态对话框的背景遮罩效果。 ```javascript var bgObj = document.createElement("div"); bgObj.setAttribute('id', 'bgDiv'); bgObj.style.position = "absolute"; bgObj.style.top = "0"; ...

    ASP.NET对话框

    这个控件允许你在后台代码中触发对话框的显示和隐藏，同时保持页面的其他部分不可操作，模拟出模态对话框的效果。配置ModalPopupExtender包括指定要显示的控件、触发器以及对话框的位置和行为。 在描述中提到的"可...

    模仿MSN弹出对话框效果.zip

    6. 模态对话框：模仿MSN对话框可能涉及创建模态对话框，即对话框出现时阻止用户与页面其他部分交互。这可以通过在对话框上方添加一个半透明遮罩层实现，同时确保对话框处于焦点状态，直到用户关闭它。 7. 跨浏览器...

    jquery模拟ajax关闭div窗口效果

    这种效果常见于弹窗对话框、提示框或者模态窗口的关闭，提供一种无刷新的用户体验。 首先，我们需要了解基本的HTML结构。一个简单的div窗口可能包含以下内容： ```html &lt;div id="modal"&gt; 这里是窗口内容 关闭 &lt;/...

    ZxjayWebExplorer 预览文件列表区域，列出文件目录，及常见的操作

    ZxjayWebExplorer 预览 ...2.提示框，用拖动DIV模拟的模态对话框。 3.目录树部分，外观同Windows资源管理器形似。 4.支持在线压缩解压，Ajax上传下载，新建、编辑文本文件，移动、复制、重命名文件等等操作。

    js操作模态窗口及父子窗口间相互传值示例

    如果需要在这些浏览器中实现类似功能，可能需要使用其他技术如iframe或者第三方JavaScript库来模拟模态窗口效果。 对于现代Web应用开发来说，了解并掌握父子窗口间的数据传递技术，对提升用户体验以及满足特定的...

    DIV弹出层+定位

    这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指一个可以隐藏或显示的独立区域，当用户触发特定事件（如点击按钮）时，该区域会从页面的某个位置滑出。实现这个效果通常需要...

    15种bootstrap模态框动画弹出特效.rar

    一个Bootstrap模态框由三部分组成：模态对话框（modal-dialog）、模态内容（modal-content）和模态窗格（modal-body）。HTML结构大致如下： ```html &lt;div class="modal fade" id="myModal" tabindex="-1" role=...

    Jquery弹出代码

    showModal('模态对话框标题', '这是模态对话框的内容'); }); ``` 这个例子中，我们创建了一个遮罩层`modal`和一个对话框`modal-content`，并通过JavaScript控制它们的显示和隐藏。同时，我们还监听了Esc键...

    服务器端弹出对话框确认

    然后，客户端的JavaScript代码接收到这些信息后，显示一个模态对话框，提供确认或取消的选择。 例如，一个简单的JavaScript实现可以这样写： ```javascript function showServerConfirm(message) { var dialog = ...

Magicbox
Global site tag (gtag.js) - Google Analytics