网页上默认的提示框或对话框一般比较丑,可以利用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里面自定义弹出窗口的更多相关文章

  1. CSS3/jQuery自定义弹出窗口

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  2. 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例:自定义弹出窗口有感

    前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...

  3. html5+css3+javascript 自定义弹出窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  4. 【Android】百度地图自定义弹出窗口

    我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ...

  5. UpdatePanel无法直接弹出窗口的解决

    UpdatePanel无法直接弹出窗口的解决 2010-06-20  来自:博客园  字体大小:[大 中 小] 摘要:本文介绍一些UpdatePanel无法直接弹出窗口的解决方法 ///<sum ...

  6. 34.qt quick-Popup弹出窗口自定义

    1.Popup介绍 Popup是一个弹出窗口的控件它的常用属性如下所示: anchors.centerIn : Object,用来设置居中在谁窗口中. closePolicy : enumeratio ...

  7. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  8. 深入浅出ExtJS 第七章 弹出窗口

    7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...

  9. ajax弹出窗口

    提取自ZCMS的弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻,外观漂亮: 兼容ie6/7/8.firefox2 ...

随机推荐

  1. gcc 的编译过程

    通常我们都是使用下面的命令来直接生成可执行文件 gcc demo.c -o demo 对于我们来说十分简单,但是对编译器来说却完成了一系列复杂的工作,概括起来有如下几步: 1. 预处理 gcc -E ...

  2. [C#编程参考]把图像转换为数组的两种实现

    当一个程序和一个图片放在一起,无非有两种操作: 第一种,就是传输这个图片,在传输图片之前要首先把这个图片变成byte类型的数组.所以这时候我们用到的是图片的存储的数据,也就是图片属性中的大小.我们并不 ...

  3. linux下安装PHP的redis扩展

    1.安装redis ①下载:https://github.com/phpredis/phpredis.git ②cd phpredis   进入目录 ③/usr/local/php/bin/phpiz ...

  4. android-适配Adapter

    Adapter是把数据和用户界面视图绑定到一起的桥梁类,负责创建用来表示父视图中的每一个条目的子视图,并提供对底层数据的访问. public class MainActivity extends Ac ...

  5. 1_HelloWorld

    学iOS开发与学Swift是两件事情,Swift只是一种语言,它有官方手册,里面包含了全部的语法.对其他任何一门语言很熟悉的人,学习Swift可能只需要几天的时间.而这之后,学习iOS开发才是难点,有 ...

  6. 一个int 数组,里面数据无任何限制,要求求出所有这样的数a[i],其左边的数都小于等于它,右边的数都大于等于它。能否只用一个额外数组和少量其它空间实现。

    一个int数组, 比如 array[],里面数据无任何限制,要求求出 所有这样的数array[i],其左边的数都小于等于它,右边的数都大于等于它.能否只用一个额外数组和少量其它空间实现. 分析:这题很 ...

  7. STL deque详解

    英文原文:http://www.codeproject.com/Articles/5425/An-In-Depth-Study-of-the-STL-Deque-Container 绪言 这篇文章深入 ...

  8. HDU 3571 N-dimensional Sphere

    高斯消元,今天数学死了无数次…… #include <cstdio> #include <cstring> #include <cmath> #include &l ...

  9. mysql下的SELECT INTO语句

    在mysql下使用SELECT INTO语句会产生ERROR 1327 (42000): Undeclared variable:new_tablename 此时要使用: CREATE TABLE C ...

  10. Objective-c 程序结构

    类是Objective-c的核心,Objective-c程序都是围绕类进行的.Objective-c程序至少包含以下三个部分: 1.类接口:定义了类的数据和方法,但是不包括方法的实现代码. 2.类实现 ...