以前总是看到很多的弹出框，样式各异。很多是用的第三方插件，总觉得没有追溯到根本。这次，我用单纯的js、html写了一个弹框例子，希望能够给各位一个小参考，共同学习：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="t.css">
<title>弹出窗口</title>
<script>
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">弹框打开ONE</a> <a href="javascript:void(0)" onclick="show('light2')">弹框打开TWO</a>
<div id="light" class="t1_content">
<div class="t1">
<div class="top">
<p>弹窗标题</p>
<a href="javascript:void(0)" onclick="hide('light')"><img src="images/t1/but_2.png" border="0" ></a></div>
<div class="nr"> 弹窗内容，可固定高度，或者改自适应高度
<p>
<input href="javascript:void(0)" onclick="hide('light')" type="button" class="but_1" value="确定"/>
</p>
</div>
<div class="fot"> </div>
</div>
</div>
<div id="light2" class="t2_content">
<div class="t2">
<div class="top">
<p>弹窗标题</p>
<a href="javascript:void(0)" onclick="hide('light2')"><img src="images/t2/but_1.png" border="0" ></a></div>
<div class="nr"> 弹窗内容，可固定高度，或者改自适应高度 </div>
<div class="fot">
<p> <a href="javascript:void(0)" onclick="hide('light2')"><img src="images/t2/but_2.png" border="0" ></a> </p>
</div>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
附件中是css样式和图片代码
相关推荐
1. **原生JavaScript弹出框**：JavaScript提供了三种内置的弹出框：`alert()`、`prompt()`和`confirm()`。这些方法会阻塞页面的执行，直到用户与其交互完毕。 - `alert()`：显示警告消息，用户只能点击"确定"关闭...
### JS弹出框几种形式详解 在Web开发中，JavaScript（JS）的弹出框是与...通过以上分析，我们可以看到JavaScript弹出框在Web开发中的广泛应用，以及在不同框架下如何灵活地使用这些弹出框来增强用户体验和功能实现。
JavaScript弹出框架是一种常见的网页交互技术，用于在用户与页面交互时显示额外信息或功能，如警告、确认对话框、模态窗口等。在这种框架中，`lhgdialog` 是一个具体的实现，它是一个轻量级且功能丰富的弹出对话框...
2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...
在网页开发中，自定义JavaScript弹出框组件是不可或缺的一部分，它允许开发者创建具有高度定制化功能的对话框，以满足各种用户交互需求。本文将深入探讨如何利用JavaScript实现这样的组件，包括其基本原理、设计思路...
JavaScript弹出框插件，如描述中的"artDialog-5.0.3"，是Web开发中常用的交互元素，主要用于显示提示、警告、确认或提供更复杂的信息展示。这类插件通常具有高度自定义和可扩展性，可以极大提升用户界面的交互性和...
"漂亮的js弹出框"是一个关于利用JavaScript实现美观弹出框的资源，它提供了两种不同的展示方式：显示图片和嵌入网页内容。这个功能在网页设计中十分常见，例如用于提示信息、展示详细内容或进行用户确认操作。 首先...
当我们谈论“超级漂亮的js弹出框效果”时，我们通常是指利用JavaScript实现的对话框或者提示框，这些弹出框不仅具备基本功能，还通过美观的设计提升了用户体验。在本文中，我们将深入探讨如何使用JavaScript创建具有...
总结来说，JavaScript弹出框是网页交互中的关键元素。通过了解和运用`alert()`, `prompt()`, `confirm()`，以及自定义弹出框的方法，开发者可以创建既实用又美观的用户体验。在实际项目中，结合HTML和CSS，我们可以...
个人学习js弹出框的一些例子，含有alert,prompt,confirm, showModalDialog,showModelessDialog,很全也很简单，包学包会，例子全部都有，并且简单明了！
本资源提供了两个风格独特的JavaScript弹出框，适用于不同的界面设计需求。这两个弹出框可能分别采用了纯JavaScript实现或者结合了jQuery库，因为标签中提到了"jQuery js"，暗示了可能的实现方式。 首先，我们要...
"js弹出框弹出层"是指使用JavaScript实现的一种非模态或者模态的对话框，它可以在页面上创建一个独立的窗口，用来显示内容、进行交互。在本例中，我们关注的是ThickBox，这是一个流行的JavaScript库，专门用于创建...
在这个"js弹出框-弹出层-拖拽-兼容"的插件中，开发者通过纯JavaScript实现了弹出层的创建、拖拽功能的添加，并优化了代码以适应多种浏览器环境。这个插件的价值在于它不需要依赖jQuery或其他大型库，降低了页面加载...
在开发过程中，图片和JavaScript弹出框是两个非常常见的元素，它们在构建用户界面和提供交互体验时起着至关重要的作用。这篇博文“开发中经常用的图片和JS弹出框”可能探讨了如何有效地利用这些技术来提高网站或应用...
综上所述，"js弹出框选择器"涵盖了JavaScript基础、DOM操作、事件处理、CSS样式、数据结构、逻辑控制、模态对话框、异步编程、响应式设计以及无障碍性等多个方面，是一个综合性的前端开发任务。熟悉并掌握这些知识点...
"JS动态弹出框，动态效果，lightbox2.3"是一个专为实现这种效果的JS库，它提供了美观且具有动态效果的弹出框解决方案。 Lightbox2.3 是这个库的版本号，它是一款轻量级、易于使用的插件，旨在为用户提供优雅的图片...
BaiduPop 弹出框 JS弹出框，方便实用
- JavaScript文件（如`showConfirmBox.js`）：实现弹出框的逻辑和API接口。 - 示例HTML文件（如`index.html`）：展示如何在实际项目中引入和使用该插件。 - 图片或其他资源文件：用于弹出框中的图标或背景等。 通过...