ajax弹窗插件

// 每个弹窗的标识
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 = "<div class=‘zhuti‘ id=‘"+idzt[x]+"‘ bs=‘"+x+"‘ style=‘width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;‘></div>";
    $("body").append(nr);

    //加载弹窗标题
    var content ="<div id=‘title"+x+"‘ class=‘title‘ bs=‘"+x+"‘>"+this.config.title+"<div id=‘close"+x+"‘ class=‘close‘ bs=‘"+x+"‘>×</div></div>";
    //加载弹窗内容
    var nrh = this.config.height - 75;
    content = content+"<div id=‘content"+x+"‘ bs=‘"+x+"‘ class=‘content‘ style=‘width:100%; height:"+nrh+"px;‘>"+this.config.content+"</div>";
    //加载按钮
    content = content+"<div id=‘btnx"+x+"‘ bs=‘"+x+"‘ class=‘btnx‘>"+this.config.buttons+"</div>";

    //将标题、内容及按钮添加进窗口
    $(‘#‘+idzt[x]).html(content);

    //创建遮罩层
    if(this.config.isMask)
    {
        var zz = "<div id=‘zz‘></div>";
        $("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++;  //标识增加

}
时间: 2024-10-13 18:03:24

ajax弹窗插件的相关文章

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

一个简单的页面弹窗插件 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

javascript表单的Ajax 提交插件的使用

Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. //ajaxForm 提交方式 $('#reg').ajaxForm(function () { alert('提交成功!'); }); 使用ajaxForm()方法,会直接实现ajax 提交.自动阻止了默认行为,而它提交的默认页面是f

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag

FirstBlood-jquery弹窗插件

嗯,这是第一次用插件形式写的弹出提示窗口,经验尚浅,写得也不好. /*------------------------------- * Author: D.pan * Date: 2015/6/15 * Version: 1.0 * Description: 弹窗插件 -------------------------------*/ ;(function($){ var defaultSetting = { title : '', //标题 closeText : '关闭', //关闭按钮

thinkphp 点击某个class提交post值,返回回来用一个弹窗插件,提示返回来要说的话

下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <=============  控制器  =================> public function index(){ $uid = session('uid'); if($uid <= 0){ $url = "/Home/User/login.html"; echo '<script type="text/javascript">alert(&qu

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

原生Js弹窗插件|web弹出层组件|对话框

wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种弹窗类型(普通型弹窗.仿微信|android|ios弹窗.定位弹窗.全屏弹窗),多种动画展示效果,可以让您的网页对话框千变万化. ◆ 一睹风采 ◆ 在页面只需引入wcPop.js即可: <script src="wcPop.js"></script> ◆ API调用