HTML CSS 弹出框样式
弹出框效果。
<!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" />
<title>无标题文档</title>
<style type="text/css">
/* 以下是 最外层 样式设置*/
.div_cm {
width:710px;
text-align:center;
position:absolute;
z-index:10;
background-color:#B7D2FB;
__background-color:#DAE8FE;
}
/* 以下是 层中所有A标签 样式设置*/
.div_cm a {
color:#1774F0;
text-decoration:none;
padding:0 6px 0 6px;
border:0px;
}
.div_cm a:hover {
color:#0B5ED9;
background-color:#7BADF9;
}
/* 以下是 title 样式设置*/
.div_cm .div_title {
width:98%;
height:20px;
line-height:20px;
font-size:12px;
margin-top:2px;
margin-left: auto;
margin-right: auto;
text-align:right;
font-weight:bold;
color:#1774F0;
}
/*以下是 table 外层的div 样式，
* 设置下拉框，最小height，最大height，
* 设置div在外层div中左右居中
* 设置 table 的总宽度，以及下边的间距
*/
.div_cm .div_tab {
width:97%;
margin-bottom:8px;
min-height:20px;
max-height:198px;
border:1px solid #666;
overflow-y:auto;
cursor:default;
margin-left: auto;
margin-right: auto;
text-align:left;
background-color:#FFF;
color:#234E56;
}
/* 以下是 table 样式设置 */
.div_cm .table_cm {
width:100%;
font-size:13px;
word-break:break-all;
word-wrap:break-word;
}
/* 以下是td 样式设置 只有上边框 、 左边框
* 并 第一行的上边框没有
* 并 第一列的左边框没有 */
.table_cm td {
padding:2px;
}
.table_cm .tr_top td {
border-top:0px;
}
.table_cm .td_txt {
border-top:1px solid #666;
border-left:1px solid #666;
}
.table_cm .td_left {
border-top:1px solid #666;
border-left:0px solid #666;
}
</style>
</head>
<body>
<script src="jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var div = jQuery("#div_back");
div.css({ 'width': window.screen.width, 'height': window.screen.height });
div.fadeTo('slow', 0.5);
});
</script>
<div id="div_back" style="position:absolute; top:0px; left:0px; filter:alpha(opacity=30);opacity:0.8; background-color:#CCF; width:800px; height:500px;z-index:8"></div>
<div class="div_cm">
<div class="div_title"> <span style="float:left; margin-left:5px;">选择收货人</span> <a href="#">X</a> </div>
<div class="div_tab">
<table border="0" cellspacing="0" cellpadding="0" class="table_cm">
<tr class="tr_top">
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地址 </td>
</tr>
<tr>
<td width="10%" class="td_left">姓名哦杨</td>
<td width="13%" class="td_txt">呼和浩特市</td>
<td width="17%" class="td_txt">0755-12345678</td>
<td width="15%" class="td_txt">15012345678</td>
<td class="td_txt">地址地址 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地 地址地址 地址地址址地址 </td>
</tr>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
总结来说，创建好看的jQuery弹出框样式涉及HTML结构设计、CSS样式定制以及jQuery事件处理。通过这些技术，我们可以实现交互性强且视觉效果出色的弹出框，从而提高网站或应用的用户满意度。实践过程中，不断调整和...
### 自定义弹出框样式 alert修改 在网页开发过程中，我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用，但其样式固定且无法自定义，这在追求用户体验和界面美观的现代Web...
本教程将介绍如何通过自定义CSS和JavaScript来美化`alert`和`confirm`弹出框，实现更个性化的界面效果，而无需依赖浏览器的默认样式。 首先，我们不再直接使用`window.alert()`和`window.confirm()`方法，而是创建...
在压缩包内的文件中，“alert和confirm弹出框样式美化”可能是HTML、CSS和JavaScript代码的集合，展示了如何实现这个功能的示例或者库文件。而“说明.txt”很可能是对整个项目的一个简短介绍，包括如何使用这些代码...
`alert` 函数的基本语法是 `alert(message)`，它会弹出一个只有一个按钮的对话框，用户点击后，对话框关闭，程序继续执行。`message` 参数是向用户显示的文本字符串。 `confirm` 函数的语法是 `var result = ...
在“html5 css3简单的遮罩弹出框动态效果”这个主题中，我们将探讨如何利用这两项技术实现一个基本的遮罩层弹出框，为用户提供信息提示、登录注册等互动体验。 首先，HTML5是超文本标记语言的第五个版本，它引入了...
当我们谈论"C#前台js弹出框样式css"时，我们实际上是在讨论如何利用JavaScript来创建交互式的弹出对话框，并通过CSS（层叠样式表）来定制这些对话框的外观。下面我们将深入探讨这一主题。 首先，JavaScript的`alert...
纯html+css代码编写手机端弹出层样式，其中包含确定和取消按钮
总的来说，自定义弹出框样式是一个集HTML、CSS和JavaScript技术于一体的应用，它能够帮助开发者创造出更符合网站设计风格和用户体验需求的交互元素。通过学习和实践这个主题，你可以提升自己的前端开发能力，更好地...
本文将深入探讨如何使用CSS3来创建具有吸引力和功能性的弹出提示框。 首先，让我们了解弹出提示框的基本结构。一个简单的弹出提示框通常由HTML元素组成，如`<div>`，这个元素可以设置为绝对定位以便在页面上的特定...
2. **CSS样式**：为了使弹出框具有更好的视觉效果，可以使用CSS添加阴影、边框、背景色等样式，并调整其位置以居中或相对于某个元素对齐。 3. **JavaScript控制**：通过JavaScript，我们可以控制弹出框的显示和隐藏...
总结来说，创建一个jQuery封装的HTML弹出框涉及到HTML结构的设计、CSS样式的定制、JavaScript事件处理和动态内容的管理。这样的自定义组件能够提高代码的可维护性和网页的用户体验，是现代Web开发中的常见实践。在...
要使弹出框在手机上自适应，我们需要运用CSS3的媒体查询（Media Queries）来调整弹出框的布局和样式。媒体查询允许我们根据设备的特性，如视口宽度，来应用不同的样式。通过设置弹出框的宽度为百分比，我们可以确保...
- **css**: 目录包含了样式表文件，其中定义了3D弹出框及其组件的样式和3D变换规则。 - **fonts**: 可能包含用于弹出框内文字的自定义字体文件，以提供独特的视觉风格。 - **js**: 可能包含JavaScript代码，用于处理...
在网页设计中，"js+css弹出登陆框"是一个常见的功能，用于提供用户友好的登录体验。这个功能结合了JavaScript的动态交互能力和CSS的样式设计，使得登录框能够以弹出的方式出现，提高用户体验。下面我们将详细探讨...
总之，"js+css多种效果的弹出框"是一个结合了JavaScript动态性与CSS视觉设计的实用项目，它展示了如何通过这两种技术实现丰富的用户体验，同时为开发者提供了定制弹出框样式的可能性。无论是初学者还是经验丰富的...
总的来说，改写`alert()`弹出框样式涉及到前端开发的多个方面，包括DOM操作、CSS样式设计、事件处理和用户交互设计。通过掌握这些技能，你可以创造出与网站风格一致且功能强大的提示对话框，提升用户的交互体验。在...
在网页设计中，CSS（层叠样式表）和HTML5是不可或缺的技术，它们共同构建了网页的视觉表现和结构。本资源"19种CSS绚丽弹窗样式"聚焦于使用CSS来实现各种创新且吸引人的弹窗效果，这些效果可以用于通知、提示、对话框...
- 一致性：保持弹出框样式和交互在整个应用程序中的一致性。 - 错误处理：在用户填写表单时，弹出框可以用于即时反馈错误，指导用户修正。 - 操作顺序：确保弹出框的出现顺序符合逻辑，方便用户理解和操作。 - ...
在前端开发中，用户界面的交互性和美观性是至关重要的，而自定义遮罩和Alert弹出框样式正是实现这一目标的关键技术。本文将深入探讨这两个主题，帮助开发者提升其应用的用户体验。 首先，我们来了解遮罩层（Mask）...