简单弹窗

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>弹窗测试</title>
 6 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
 7 </head>
 8
 9 <body>
10 <script type="text/javascript" language="javascript">
11     $(document).ready(function () {
12         //$("#btn_center").click(function () {
13         //    hcOpenwin();
14         //});
15     });
16 </script>
17 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
18   <input type="button" value="居中窗口" id="btn_center" onclick="hcOpenwin()" />
19 </div>
20 <style type="text/css">
21 .hcw_window{  width:300px;  background-color:#FFAD41;  position:absolute;
22     padding:2px; margin:5px;  display:none; z-index:999; }
23 .hcw_content{  height:368px;  background-color:#FFECA7;  font-size:14px;
24     overflow:auto;  }
25 .hcw_title{ padding:0 0 2px 2px; color:#FFF; font-size:14px;
26     font-weight:bolder; }
27 .hcw_title img{ float:right; }
28 </style>
29 <div class="hcw_window" id="hcwin0">
30   <div id="hcw_title" class="hcw_title"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuaXRibG9nLmNvbS9ibG9nLzM2MTExNC8yMDE0MDkvMTExNjQyMDExMDY3NjMyLmpwZw==.jpg" alt="关闭" />注册抢购</div>
31   <div class="hcw_content"> 弹窗测试 </div>
32 </div>
33 <script type="text/javascript">
34 //data{id:windowid,pre:classpre,relattop:relattop,relatleft:relatleft}
35 function hcOpenwin(data){
36     var windowHeight = $(window).height();
37     var windowWidth = $(window).width();
38     if(typeof(data)!=‘object‘) var data = new Object();
39     if(!data.id) data.id = ‘hcwin0‘;
40     var popWidth = $("#"+data.id).width();
41     var popHeight = $("#"+data.id).height();
42     var popY=(windowHeight-popHeight)/2;
43     var popX=(windowWidth-popWidth)/2;
44     if(!data.pre) data.pre = ‘hcw_‘;
45     $("#"+data.id).css("top",popY).css("left",popX).css("display","block");
46     $("#"+data.pre+"title img").click(function(){
47         $(this).parent().parent().css("display","none");
48     });
49 }
50 </script>
51 </body>
52 </html>
时间： 2024-10-09 04:51:56

简单弹窗的相关文章

Android：PopupWindow简单弹窗改进版

Android:PopupWindow简单弹窗 继续上一节的内容,改进一下,目标是点击菜单后把菜单收缩回去并且切换内容,我使用的是PopupWindow+RadioGroup public class MainActivity extends TabActivity { private PopupWindow pop; private TabHost tabhost; private RadioGroup radiogroup; private RadioButton tab1,tab2; @O

用CSS做的简单弹窗

最近在学习css,学习的时候发现,css是多么博大精深,是那么的神奇. 老师给了一个项目给我们做练习,以下我介绍一个用纯css简单做的弹窗 先看下其效果: 想整理下思路: 首先我设置了两个按钮,一个是打开弹窗,另外是关闭弹窗,这两个按钮用label关联到input:radio. 布局如下: <input type="radio" name="btn" id="close" class="btn"/> <div

商务通简单弹窗样式 V1.0

代码为: document.writeln('<style>*{margin:0; padding:0;}</style>');//创建中间弹框    document.writeln('<div id="showsswt" style="width:240px; height:120px; background:#FFFFFF; border:2px solid #CCCCCC; display:none;position: fixed;lef

简单弹窗拖拽

<!doctype html><!--<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范.--><html>    <head>        <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->        <meta http-equiv="Content-

Flutter 中SimpleDialog简单弹窗使用

import 'package:flutter/material.dart'; import 'dart:async'; enum Option { A, B, C } class SimpleDialogDemo extends StatefulWidget { @override _SimpleDialogDemoState createState() => _SimpleDialogDemoState(); } class _SimpleDialogDemoState extends St

原生弹窗拖拽代码demo+简单的抽奖

拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400px;height: 300px;top:100px;left:

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

嫌弃浏览器自带弹出框，写个简单的jq自定义弹窗插件

最近做项目写个表单验证,提交信息验证有错误的时候,用了最懒的方法,直接把错误提示用alert()弹出框弹出来,于是老大看完后给了这个表情... 确实,自带弹窗样式丑不能自定义这些问题困扰着很多用户,而且在同浏览器有不同的表现, 有这样的:.. 有这样的:.. 还有这样的:.. 还有这样的: 相信做前端的都很熟悉这些面孔~ 不统一风格的弹窗直接拉低了整个网站的逼格.. 好,那就写个简单的JQ插件来装饰一下吧. JQ插件标准的封装代码如下,首先需要闭包: <script type="text/

Github项目解析（十一）--&gt;一个简单，强大的自定义广告活动弹窗

转载请标明出处:一片枫叶的专栏 上一篇文章中讲解了我最近写的一个快速集成二维码扫描库,其核心的实现扫描的功能,是通过调用ZXing库实现的.由于在实现二维码扫描功能的时候发现集成二维码扫描功能并不是特别方便,于是有了将其制作成标准库的想法,这个二维码库能够快速,方便的集成二维码扫描功能,项目地址是在:android-zxingLibrary**,在项目开源后有不少同学提出了许多不错的意见,目前也在不断的迭代中,自己也学到了很多. 本文我们将讲解一个简单,强大的广告活动弹窗控件.不少App在打开的