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

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

    2016-05-16 17:24:22原创514
    第二种情况是关于弹出框,没有关闭按钮,但是点击其他地方的时候,弹出框消失,这个还涉及到一些关于层次问题,必须用js给弹出框的父元素加上更高的层次,以免被下面的内容覆盖。
    复制代码 代码如下:



    询盘分配




    • 询盘详情

    • 联系人

    • 所在地

    • 来源









    js代码:
    复制代码 代码如下:

    // JavaScript Document
    $(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')) //获取分配到人弹出框的里的id值
    }
    }
    $(function(){
    bindClick(show,setValue);
    bindClick(addPanelBtn,setValue);
    bindClick(clickBtn,setValue);
    });
    /*详情弹出框开始*/
    var listInfo=$(".listName a");
    listInfo.click(function(e){
    e.preventDefault();
    var winDiaBox=$(this).closest("li").find(".winDiaBox");
    $(".winDiaBox").hide().closest('li').removeAttr('style');
    if(winDiaBox.is(':visible')) {
    winDiaBox.hide();
    } else {
    winDiaBox.show().parent("li").siblings("li").removeAttr('style')
    .find(".winDiaBox").hide();
    $(this).closest("li").css("z-index",4);
    }
    return false;
    })
    $(".winDiaBox").click(function(){return false;})
    $(document).click(function(){
    $(".winDiaBox").hide();
    $(".winDiaBox").parent().removeAttr("style");
    })
    /*详情弹出框结束*/
    })

    详情弹出框随着循环显示,这样减少了用js根据每个循环列表的位置而定位弹出框的位置
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 弹出框
    上一篇:JS 两个字符串时间的天数差计算_javascript技巧 下一篇:Js中的onblur和onfocus事件应用介绍_基础知识
    20期PHP线上班

    相关文章推荐

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

    PHP中文网