一款公用的CSS+DIV弹窗

时间：2022-09-05 15:03:53

为了方便以后自己使用！

<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&plus;DIV网页样式与布局--图片效果

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

  3. 27款经典的CSS框架

    利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...

  4. CSS &plus; DIV 让页脚始终底部

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

  5. HTML CSS &plus; DIV实现整体布局

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

  6. CSS&plus;DIV两栏式全屏布局

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

  7. CSS &plus; DIV 让页脚始终保持在页面底部

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

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

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

  9. HTML CSS &plus; DIV实现局部布局

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

随机推荐

  1. Struts2的OGNL表达式语言

    一.OGNL的概念 OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者 ...

  2. iOS解决隐藏导航栏后，打开照片选择器后导航栏不显示的问题以及更换导航栏背景色

    问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...

  3. 导入和导出表空间：复制文件比mysqldump&amp&semi;restore快

    #生成测试数据server1:mysql> CREATE TABLE test (c1 INT PRIMARY KEY)engine = innodb;Query OK, 0 rows affe ...

  4. HDU 5489 Removed Interval

    题意:求一段序列中删掉L个连续元素后的LIS. 解法:我的想法很复杂= =怎么说呢……首先用nlogn的方法求LIS得到的序列dp的第i项的意义为上升子序列所有长度为i的序列结尾元素的最小值,那么先倒 ...

  5. Android Memory Leak

    线程也是造成内存泄露的一个重要的源头.线程产生内存泄露的主要原因在于线程生命周期的不可控.1.看一下下面是否存在问题 public class ThreadActivity extends Activ ...

  6. 以Tomcat&plus;Mysql为例，实现Docker多容器连接

    Docker提供了多个容器直接访问的方法,最简单的方式是直接使用端口映射-p参数指定映射的端口或者-P映射所有端口,多个容器直接通过网络端口进行访问. 但网络端口映射方式并不是Docker中连接多个容 ...

  7. 在Vue2&period;0中集成UEditor 富文本编辑器

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很 ...

  8. 【SAP S&sol;4 1511之变】：主数据之变

    本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...

  9. 【SpringBoot】息队列介绍和SpringBoot2&period;x整合RockketMQ、ActiveMQ

    ========================13.消息队列介绍和SpringBoot2.x整合RockketMQ.ActiveMQ ======================= 1.JMS介绍和 ...

  10. 安卓界面之Toolbar上手

    一.在配置文件采用自定义Style方法去除Actionbar <resources> <style name="MyTheme" parent="The ...

相关文章