自己用jquery+css+div写的一个弹窗

【自己用jquery+css+div写的一个弹窗】的更多相关文章

自己用jquery+css+div写的一个弹窗

弹窗支持两种模式,一种是普通信息提示框,调用方法:popup.msgPopup(msg); 另一种是可以加载页面的弹窗,调用方法:popup.pagePopup(url); 效果图: css代码 ;;;width: 100%;height: 100%;opacity: 0.3;filter: alpha(opacity=50);-moz-opacity: 0.5;} .box{;background-color: #fff;border: solid 1px #dddddd;} .box_hea…

12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么今天就是来实战一下,写一个所有平台都能跑的页面出来. 首先我们要准备了解的基本知识如下,在H5开发中,我们的页面布局方式有 1. 默认布局(块状元素和内联元素) 2. 浮动布局(Float) 3. 定位布局(position: relative, absolute, top, left, right…

jQuery+css+div一些值得注意的常用语句

一.div页面布局一个好的页面布局很重要,这会让你写代码的时候层次分明: 以2列左侧固定右侧自适应宽度为例子: 这是HTML代码: <!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/1…

初学jquery，自己写的一个jquery幻灯片，代码有些笨拙，希望有大神可以指点一二，精简一下代码

html代码 <div class="picCon"> <div class="bigPic"> <ul> <li class="cur"><img src="5682865a05cd9.jpg" alt="" /></li> <li><img src="5682865c5cefe.jpg" alt…

结构-行为-样式-Css Div 居中的一个最佳实践

最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class="hr-use"></div> <div class="youwant"> <span class="loveicon"></span> <span>你可能还想要</span> &l…

javascript : 写一个类似于 jquery css() 的方法

我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object.keys(obj).forEach(function(key){ DOM["style"][key] = obj[key]; }); }, DOM是你想改的DOM元素,obj是样式对象. 使用. use(width, height){ document.querySelector(&quo…

用jQuery写了一个模态框插件

用jQuery写了一个模态框插件大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true);…

html css+div+jquery实现图片轮播

一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100%,flex布局,主要是为了网页主体内容居中,和留白部分的进一步处理 2.新建div,为网页的内容宽度,设置为1200px 3.图片轮播窗口,宽度,高度为300px,overflow:hidden 4.轮播窗口新建ul>li>img,ul采用position:relative 5.li样式 bord…

一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形旋转45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{…

自己在项目中写的一个Jquery插件和Jquery tab 功能

后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearchResult { public PDFSearchResult(string title, string fileUrl) { Title = title; FileUrl = fileUrl; } [DataMember(Name = "title")] public string Ti…

使用jQuery在屏幕上居中一个DIV

文章目录我如何去使用jQuery在屏幕的中心设置<div>? 我喜欢给jQuery添加函数,所以这个函数将有助于: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scr…

DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐心的直接看最后解答. 1. 我的第一反应: <div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-c…

利用jquery写的一个TAB页切换效果

函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == no) { $(this).addClass(tab_c_css); }else { $(this).removeClass(tab_c_css); $(this).addClass(tab_n_css); } }) if (con) { $(con).each(function(i){ if(i…

jquery用div模拟一个下拉列表框

原文 jquery用div模拟一个下拉列表框今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我感觉还有焦点获取效果没模拟出来,现在实在没想到好的办法,如果您有好的方法和思路,欢迎并谢谢你能告诉我. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <ti…

自己写的一个jQuery对联广告插件

效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,//左边广告图片效果0稳固不动,1缓慢复位 rightType:0,//右边广告图片的效果0稳固不动,1缓慢复位 leftTime:300,//左边复位时间 rightTime:300,//右边复位时间 leftCloseTime:1000,//左边关闭时间 rightCloseTime:1000,//…

自己写了一个图片的马赛克消失效果(jQuery)

其中的一个效果: html代码: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 delay: 3000, //动画执行时间 url:"0",//图片路径 count: [20, 20]//马赛…

DIV+CSS常见问题：DIV如何设置一个像素高度？

CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-size:0px;overflow:hidden;} 现在设置网页,要兼容各浏览器,比如:IE6.IE7.IE8等,而想设置DIV最小的高度会有些问题,比如在IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高…

一个纯CSS DIV天气动画图标【转扒的】

<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear infinite; animation: sunny 15s linear infinite; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255…

div+css 怎么让一个小div在另一个大div里面垂直居中

div+css 怎么让一个小div在另一个大div里面垂直居中方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200p…

表单验证——jquery validate使用说明【另一个教程】

[参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他…

jQuery+css+div--一些细节详解

(一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧!但是恰恰不巧的是jQuery自带的alert()弹出提示框就会影响这一美观: 在不同的浏览器中,alert()方法,弹出的样式真的很难看:所以为了解决这一方法,我门可以自定义自己的alert(),让我们来看看这些代码吧! function myalert(str){ var msgw,msgh,bo…

jQuery css,position,offset,scrollTop,scrollLeft用法

jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://&quo…

简易-五星评分-jQuery纯手写

超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 第二步: 写HTML代码:这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换: <div class="score_star"> <i>…

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码这里是css代码,详情请看注释 <style> /*…

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为http:/…

JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中放置不同的界面,最先的做法是每个功能写一个jsp文件,在主界面中通过.load()方法加入jsp文件,后来觉得jsp文件太多想合并到一个界面上来,通过div覆盖的方式,显示不同的界面,这时候问题来了,我事先放置了一个div文件,效果如图所示: 表格放置在指定的位置,我想先把表格隐藏,用了displa…

超级简单的jQuery纯手写五星评分效果

超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 第二步: 写HTML代码:这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换: <div class="score_star"> <i>…

写了一个迷你toast提示插件，支持自定义提示文字和显示时间

写了一个迷你toast提示插件,支持自定义提示文字和显示时间,不想用其他第三方的ui插件,又想要toast等小效果来完善交互的同学可以试试, 代码中还贡献了一段css能力检测js工具函数,做项目的时候可以考虑把这个插件和上一篇迷你confirm弹窗插件一起集成到自已写的Base/tool/Library中代码已经粘贴出来,直接复制即可看到效果,高手勿喷,可以相互交流下(⊙⊙) (hmtl js css已经集成到一起无需其他文件,不依赖jquery zepto等库) <!DOCTYPE ht…

43个实例xHTML+CSS(DIV+CSS)网页及导航布局

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的.彬Go也希望通过博客让所有读者正视代码语义化的重要性,请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CSS”替代吧! 今天彬Go将向大家推荐43个实例xHTML+CSS(DIV+CSS)网页…

用C3中的animation和transform写的一个模仿加载的时动画效果

用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2> <div class="demo"> <div></div> <div></div> <div></d…