• 技术文章 >web前端 >js教程

    jquery弹出框的用法示例(一)_jquery

    2016-05-16 17:24:24原创485
    最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题。
    比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等。

    例子如下:
    复制代码 代码如下:






    • 蓝枫前端

      添加询盘【10

      跟踪询盘【1000








    • 蓝枫前端

      添加询盘【10

      跟踪询盘【1000








    • 蓝枫前端

      添加询盘【10

      跟踪询盘【1000








    • 蓝枫前端

      添加询盘【10

      跟踪询盘【1000








    • 蓝枫前端

      添加询盘【10

      跟踪询盘【1000









    弹出框内容:
    复制代码 代码如下:



    实现的弹出框的js
    复制代码 代码如下:

    $(function(){
    var $window = $(window),
    $doc = $(document),
    $body = $('body');
    //关于管理员添加删除的js代码
    var tabLi=$(".tabPanel").find("li");
    tabLi.hover(function(){
    $(this).addClass("hover").siblings().removeClass("hover");
    },function(){})
    /*弹出框定位*/
    $(window).scroll(function() {
    var pwdTips =$(".pwdTips");
    var height=pwdTips.height();
    var width=pwdTips.width();
    var bodyHieght=$(window).height() ;
    var bodyWidth=$(window).width() ;

    if(!pwdTips.is(":hidden")){
    pwdTips.css({
    position: "fixed",
    top: (bodyHieght-height)/2,
    left:(bodyWidth-width)/2
    });
    }

    });
    /*弹出框定位结束*/
    /*弹出框半透明背景的设置*/
    var bgShadow = function(zindex) {
    zindex = zindex?zindex:999;
    var _bg = $('div.pwdTipsBg'),
    bg_html = '
    ';
    if(_bg.length === 0) {
    _bg = $(bg_html);
    }
    $body.append(_bg);
    _bg.css({
    position : 'absolute',
    top : '0px',
    left : '0px',
    width : $window.scrollLeft()+$window.width()+'px',
    height : $doc.height(),
    'z-index' : zindex
    });
    return _bg;
    };

    /*弹出框半透明背景的设置*/
    /*绑定事件*/

    var bindClick = function(obj,handlerEvent){
    obj.bind("click",function(e){
    e.preventDefault();
    bgShadow(1001);
    var select=$(this).attr('contentid');
    var onLineId=$(this).attr('id');
    var pwdTips=$(select);
    if(handlerEvent!=null)
    {
    handlerEvent($(this));

    }
    pwdTips.show();
    pwdTips.find(".closeBtn,.diaSmtRst").click(function(){
    pwdTips.hide();
    var _bg = $('div.pwdTipsBg');
    _bg.remove();
    });
    pwdTips.find('#onLineId').val(onLineId);



    });

    };
    var show=tabLi.find("dt"),
    addPanelBtn=$(".addPanelBtn"),
    clickBtn=$(".clickBtn");
    var setValue= function(obj){

    if($(obj).is('.addPanelBtn'))
    {
    $('#opename').attr('value',"");

    $('#pwdRest').find('#userName').show();

    }
    else
    {

    $('#pwdRest').find('#userName').hide();
    $('#opename').attr('value',obj.text());
    $("input.shareId").attr('value',obj.attr('id'))
    }

    }
    $(function(){
    bindClick(show,setValue);
    bindClick(addPanelBtn,setValue);
    bindClick(clickBtn,setValue);
    });
    })

    所有的弹出内容根据情况做判断显示,获取相应的值,先根据触发的类型判断是修改密码或者添加用户客服,然后再显示相应的弹出内容
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:弹出框
    上一篇:Js中的onblur和onfocus事件应用介绍_基础知识 下一篇:js中onload与onunload的使用示例_javascript技巧
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• Angular如何进行视图封装?聊聊三种封装模式• JavaScript中switch的四种写法示例• 一文快速详解ES6~ES12的全部特性!• 万字图解JavaScript笔记总结• 如何搞懂虚拟 DOM?看看这篇文章吧!
    1/1

    PHP中文网