html里面自定义弹出窗口
网页上默认的提示框或对话框一般比较丑,可以利用div遮盖层来自定义对话框
1.定义一个按钮或者链接(项目里面是通过点击一个图片)
<img src="data:images/zz.gif" style="margin-top:16%" onclick="myalert('描述(限200字):')"/>
2.设置隐藏的遮罩层
<div id="divResult"></div><div id="bg"></div>
<div class="box" style="display: none">
<div class="title">标题</div>
<div class="list2">
<p></p>
</div>
<div>
<textarea id="remark" style="width:80%;margin-left:5%"></textarea>
</div>
<div class="end">
<center>
<a id="btnZhuanhui" href="#" class="close" style="color:#000000; font-size:16px; margin-right:5%">确定</a>
<a id="btnCloseHref" href="#" class="close" style="color:#000000; font-size:16px; margin-left:5%">取消</a>
</center>
</div>
</div>
3.用css设定自己的通用样式
.box
{
position: absolute;
width: 250px;
left: 50%;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px solid rgb(0,153,153);
/*padding: 1px;*/
}
.box div.title
{
height: 35px;
font-size: 16px;
background-color: #099;
position: relative;
padding-left: 10px;
line-height: 35px;
color: #fff;
}
.box div.title a
{
position: absolute;
right: 5px;
font-size: 16px;
color: #fff;
}
.box div.list
{
min-height:60px;
padding: 10px;
}
.box div.list p
{
height: 24px;
line-height: 60px;
font-size:14px;
}
.box div.end
{
min-height:30px;
padding: 5px;
}
#bg
{
background-color: #666;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
4.编写myalert
function myalert(msg) {
$("#bg").css({
display: "block", //height:$(document).height()
height: "100%",
position: "fixed"
});
var $box = $('.box');
$box.css({
//设置弹出层距离左边的位置
left: ($("body").width() - $box.width()) / 2 + "px",
//设置弹出层距离上面的位置
top: ($(window).height() - $box.height()) / 2 - $(window).scrollTop() - $box.height() + "px",
display: "block"
}).find("p").html(msg);
}
html里面自定义弹出窗口的更多相关文章
- CSS3/jQuery自定义弹出窗口
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
- 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例:自定义弹出窗口有感
前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...
- html5+css3+javascript 自定义弹出窗口
效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...
- 【Android】百度地图自定义弹出窗口
我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ...
- UpdatePanel无法直接弹出窗口的解决
UpdatePanel无法直接弹出窗口的解决 2010-06-20 来自:博客园 字体大小:[大 中 小] 摘要:本文介绍一些UpdatePanel无法直接弹出窗口的解决方法 ///<sum ...
- 34.qt quick-Popup弹出窗口自定义
1.Popup介绍 Popup是一个弹出窗口的控件它的常用属性如下所示: anchors.centerIn : Object,用来设置居中在谁窗口中. closePolicy : enumeratio ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- 深入浅出ExtJS 第七章 弹出窗口
7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...
- ajax弹出窗口
提取自ZCMS的弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻,外观漂亮: 兼容ie6/7/8.firefox2 ...
随机推荐
- gcc 的编译过程
通常我们都是使用下面的命令来直接生成可执行文件 gcc demo.c -o demo 对于我们来说十分简单,但是对编译器来说却完成了一系列复杂的工作,概括起来有如下几步: 1. 预处理 gcc -E ...
- [C#编程参考]把图像转换为数组的两种实现
当一个程序和一个图片放在一起,无非有两种操作: 第一种,就是传输这个图片,在传输图片之前要首先把这个图片变成byte类型的数组.所以这时候我们用到的是图片的存储的数据,也就是图片属性中的大小.我们并不 ...
- linux下安装PHP的redis扩展
1.安装redis ①下载:https://github.com/phpredis/phpredis.git ②cd phpredis 进入目录 ③/usr/local/php/bin/phpiz ...
- android-适配Adapter
Adapter是把数据和用户界面视图绑定到一起的桥梁类,负责创建用来表示父视图中的每一个条目的子视图,并提供对底层数据的访问. public class MainActivity extends Ac ...
- 1_HelloWorld
学iOS开发与学Swift是两件事情,Swift只是一种语言,它有官方手册,里面包含了全部的语法.对其他任何一门语言很熟悉的人,学习Swift可能只需要几天的时间.而这之后,学习iOS开发才是难点,有 ...
- 一个int 数组,里面数据无任何限制,要求求出所有这样的数a[i],其左边的数都小于等于它,右边的数都大于等于它。能否只用一个额外数组和少量其它空间实现。
一个int数组, 比如 array[],里面数据无任何限制,要求求出 所有这样的数array[i],其左边的数都小于等于它,右边的数都大于等于它.能否只用一个额外数组和少量其它空间实现. 分析:这题很 ...
- STL deque详解
英文原文:http://www.codeproject.com/Articles/5425/An-In-Depth-Study-of-the-STL-Deque-Container 绪言 这篇文章深入 ...
- HDU 3571 N-dimensional Sphere
高斯消元,今天数学死了无数次…… #include <cstdio> #include <cstring> #include <cmath> #include &l ...
- mysql下的SELECT INTO语句
在mysql下使用SELECT INTO语句会产生ERROR 1327 (42000): Undeclared variable:new_tablename 此时要使用: CREATE TABLE C ...
- Objective-c 程序结构
类是Objective-c的核心,Objective-c程序都是围绕类进行的.Objective-c程序至少包含以下三个部分: 1.类接口:定义了类的数据和方法,但是不包括方法的实现代码. 2.类实现 ...