为了方便以后自己使用!

<html>
<head>
<style>
.winmainshow { background: #fff; padding: 10px 5px 5px 25px; line-height: 25px; border: 1px solid #333; position: fixed; z-index: 1000; border-radius: 10px; color: #999; }
</style>
</head>
<body>
<!--遮罩背景-->
<div id="shadow" class="winbg" style="display: none">
</div>
<div id="UserFeedbackamin" class="winmainshow" style="display: none;">
</div>
<input type="button" id="afeed" value="弹出">

</body>
</html>

javascript代码:

$().ready(function () {
 $("#afeed").click(function () {
                var strc = ' <label> <input id="yjjy" class="c_opinion" name="one" type="radio" value="1" />意见建议</label>';
                strc += '<label> <input id="tj" class="c_opinion" name="one" type="radio" value="2" />bug提交</label> <label><input id="tsjb" class="c_opinion" name="one" type="radio" value="3" />投诉举报</label>';
                strc += '<label><input id="xqbx" class="c_opinion" name="one" type="radio" value="4" />寻求帮助</label>';
                strc += '<br/><label id="labmsg"></label>';
                windowCenteredfeed("#UserFeedbackamin", "", 600, 400, strc);
            });

$("#closeIframe").live("click", function () {
                $("#loginPanel").animate({ 'top': '50%', 'left': '50%', 'height': '0px', 'width': '0px', 'opacity': '0.1' }, function () { $("#loginPanel").hide(); $("#shadow").hide(); });
            });

});

function windowCenteredfeed(obj, title, width, height, content) {

            $("#shadow").show();
            $(obj).show();
            $(obj).css('height', '0px').css('width', '0px').css('top', $(window).height() / 2 + 'px').css('left', $(window).width() / 2 + 'px').css('opacity', '0.1');
            $(obj).html("<div class=\"winwork\">" + title + "<i id='closeIframefeed' class=\"close\">×</i></div>" + content);

            $(obj).animate({ 'height': height + 'px', 'width': width + 'px', 'top': ($(window).height() - height) / 2 + 'px', 'left': ($(window).width() - width) / 2 + 'px', 'opacity': '1' }, "slow");
        }

一款公用的CSS+DIV弹窗的更多相关文章

  1. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  2. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  3. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  4. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. CSS+DIV常用命名

    常用的符合CSS+DIV规则的命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单: ...

随机推荐

  1. [转载] python 计算字符串长度

    本文转载自: http://www.sharejs.com/codes/python/4843 python 计算字符串长度,一个中文算两个字符,先转换成utf8,然后通过计算utf8的长度和len函 ...

  2. poj 1384 Piggy-Bank(完全背包)

    Piggy-Bank Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10830   Accepted: 5275 Descr ...

  3. Java:反射

    初识Java反射机制: 从上面的描述可以看出Java的反射机制使得Java语言可以在运行时去认识在编译时并不了解的类/对象的信息,并且能够调用相应的方法或修改属性的值.Java反射机制的核心就是允许在 ...

  4. 攻城狮在路上(叁)Linux(十二)--- Linux的目录与路径

    一.相对路径与绝对路径: A.绝对路径:由根目录/开始写起的路径,例如 /usr/share/doc B.相对路径:不是由根目录/开始写起的路径. 二.目录的相关操作: 1.cd: 目录切换 cd ~ ...

  5. alloc

    注意,凡是用到指针的地方,一定要在堆中分配空间,否则指针释放了,那就不能够传值了. 将一个对象作为另外一个对象的成员变量,可以直接将两个对象联系起来.

  6. C++中各种数据类型占据字节长度

    准备校招笔试的时候经常遇到C++某个数据类型占据多少个字节的问题,查阅了下资料,总结如下: 首先罗列一下C++中的数据类型都有哪些: 1.整形:int.long 2.字符型:char.wchar_t ...

  7. hadoop map reduce 实例wordcount的使用

    hadoop jar hadoop-mapreduce-examples-2.7.3.jar wordcount /wordcount.txt /wc/output3

  8. SQL基础教程

    第一范式: 列仅包含原子值: 没有重复的组. 第二范式: 满足第一范式: 非部分函数依赖.(如果组合键中任何一列值改变,将导致非键列的值需要被更新) 那么,主键是一列(不是组合的)满足第二范式:所有列 ...

  9. Linux下杀僵尸进程办法

    1) 检查当前僵尸进程信息 # ps -ef | grep defunct | grep -v grep | wc -l 175 # top | head -2 top - 15:05:54 up 9 ...

  10. Cutting Sticks

    题意: l长的木棒,给出n个切割点,每切一次的费用为切得木棒的长度,完成切割的最小费用. 分析: 区间dp入门,区间dp的特点,一个大区间的解可以转换成小区间的解组合起来,每个切割点的标号代表边界. ...