一款公用的CSS+DIV弹窗

为了方便以后自己使用!

<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");
        }
时间: 2024-08-05 02:24:51

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

27款经典的CSS框架

利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框架,你可以选用. 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS

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

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

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

1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

一款jQuery插件+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-

css+div通用兼容性代码最全

你可以在css开头加入 *html{padding:0px} http://chengbao.feizhuliu.in/home.php?mod=space&uid=1&do=blog&quickforward=1&id=268 <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibil

CSS + DIV 让页脚始终底部

一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面,但仍然始终保持在底部. 二 position position有四个参数:static  | relative | absolute | fixed position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

2014 年 20 款最好的 CSS 工具

说到 WEB 设计,不得不介绍介绍 CSS 工具,CSS 工具在这里面扮演很重要的角色,可以简化无数开发者和设计师的工作,写出更好的 CSS 代码. 而网上有非常多的 CSS 工具,帮助设计师和开发者高效的工作和进行更多创新的创作,设计师和 web 开发者也把越来越多的 CSS 工具收入为自身的开发和设计利器. 在这篇文章中,我们罗列了 2014 年最好的 20 款 CSS 工具,希望能帮助大家简化自己的开发工作,创作出更多更好的创新作品.Enjoy! 1. Enjoy CSS 2. Keyfr