android 下载 js css 封装,弹窗的封装（css,js） 和弹窗的例子

//每个弹窗的标识

var x =0;

var idzt = new Array();

var Window = function(config){

//ID不重复

idzt[x] = "zhuti"+x; //弹窗ID

//初始化，接收参数

this.config = {

width : config.width || 300, //宽度

height : config.height || 200, //高度

buttons : config.buttons || '', //默认无按钮

title : config.title || '标题', //标题

content : config.content || '内容', //内容

isMask : config.isMask == false?false:config.isMask || true, //是否遮罩

isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动

};

//加载弹出窗口

var w = ($(window).width()-this.config.width)/2;

var h = ($(window).height()-this.config.height)/2;

var nr = "

$("body").append(nr);

//加载弹窗标题

var content ="

"+this.config.title+"

×

";

//加载弹窗内容

var nrh = this.config.height - 75;

content = content+"

"+this.config.content+"

";

//加载按钮

content = content+"

"+this.config.buttons+"

";

//将标题、内容及按钮添加进窗口

$('#'+idzt[x]).html(content);

//创建遮罩层

if(this.config.isMask)

{

var zz = "

$("body").append(zz);

$("#zz").css('display','block');

}

//最大最小限制，以免移动到页面外

var maxX = $(window).width()-this.config.width;

var maxY = $(window).height()-this.config.height;

var minX = 0,

minY = 0;

//窗口移动

if(this.config.isDrag)

{

//鼠标移动弹出窗

$(".title").bind("mousedown",function(e){

var n = this.getAttribute("bs"); //取标识

//使选中的到最上层

$(".zhuti").css("z-index",3);

$('#'+idzt[n]).css("z-index",4);

//取初始坐标

var endX = 0, //移动后X坐标

endY = 0, //移动后Y坐标

startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标

startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标

downX = e.clientX, //鼠标按下时，鼠标的X坐标

downY = e.clientY; //鼠标按下时，鼠标的Y坐标

//绑定鼠标移动事件

$("body").bind("mousemove",function(es){

endX = es.clientX - downX + startX; //X坐标移动

endY = es.clientY - downY + startY; //Y坐标移动

//最大最小限制

if(endX > maxX)

{

endX = maxX;

} else if(endX < 0)

{

endX = 0;

}

if(endY > maxY)

{

endY = maxY;

} else if(endY < 0)

{

endY = 0;

}

$('#'+idzt[n]).css("top",endY+"px");

$('#'+idzt[n]).css("left",endX+"px");

window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本

});

});

//鼠标按键抬起，释放移动事件

$("body").bind("mouseup",function(){

$("body").unbind("mousemove");

});

}

//关闭窗口

$(".close").click(function(){

var m = this.getAttribute("bs"); //找标识

$('#'+idzt[m]).remove(); //移除弹窗

$('#zz').remove(); //移除遮罩

})

x++; //标识增加

}

.zhuti { position:absolute; z-index:3; font-size:14px; border-radius:5px; box-shadow:0 0 5px white; overflow:hidden; color:#333; }

.title { background-color:#3498db; vertical-align:middle; height:35px; width:100%; line-height:35px; text-indent:1em; }

.close{ float:right; width:35px; height:35px; font-weight:bold; line-height:35px; vertical-align:middle; color:white; font-size:18px; }

.close:hover { cursor:pointer; } .content { text-indent:1em; padding-top:10px; } .btnx { height:30px; width:100%; text-indent:1em; }

.btn { height:28px; width:80px; float:left; margin-left:20px; color:#333; }

#zz { width:100%; height:100%; opacity:0.15; display:none; background-color:#ccc; z-index:2; position:absolute; top:0px; left:0px; }

无标题文档

*{

margin: 0px auto;

}

$(document).ready(function(e) {

$('#btntc').click(function(){

var html = "

这是测试的弹窗

";

var button ="";

var win = new Window({

width : 800, //宽度

height : 500, //高度

title : '测试弹窗12345', //标题

content : html, //内容

isMask : false, //是否遮罩

buttons : button, //按钮

isDrag:true, //是否移动

});

})

});

js写弹窗

1.先来看弹窗的模样 点击“弹出窗口”后会弹出下面窗口 2.下面是实现弹出窗口的代码,其中引入的jquery一般自己有,没有的话可以从网上下载.tanchuang.js和tanchuang.css写在 ...

js右下角弹窗代码&lpar;实测好用&rpar;

实测好用的js右下角弹窗代码 isplayClassDiv" style=&q ...

开源组件NanUI一周年 - 使用HTML&sol;CSS&sol;JS来构建&period;Net Winform应用程序界面

NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...

NanUI文档 - 打包并使用内嵌式的HTML&sol;CSS&sol;JS资源

NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

HTML---引入css&comma;js &vert; 常用标签示例

一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

webstorm的live templates快速编辑功能&comma;让你的css JS代码书写速度飞起来

前言: Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码, 大大提高了HTML/CSS代码编写的速度,比如下面 ...

js活jQuery实现动态添加、移除css&sol;js文件

下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

随机推荐

Android 用adb pull或push 拷贝手机文件到到电脑上，拷贝手机数据库到电脑上，拷贝电脑数据库到手机上

先说一下adb命令配置,如果遇到adb不是内部或外部命令,也不是可运行的程序或批量文件.配置下环境变量 1.adb不是内部或外部命令,也不是可运行的程序或批量文件. 解决办法:在我的电脑-属性-高级计 ...

sublime中文乱码

今天在用sublime的时候,又出现乱码的情况了.弹层如下: 检测了一下,当前文件,sublime编辑器左下角显示如下: 显示的是 ASCII 编码的文件,而其他没有没问题的页面显示的的 GBK(或G ...

文件映射spring 使用classpath方式加载hibernate映射文件

在改章节中,我们主要介绍文件映射的内容,自我感觉有个不错的建议和大家分享下