首頁  >  文章  >  web前端  >  jquery彈出框的用法範例(一)_jquery

jquery彈出框的用法範例(一)_jquery

WBOY
WBOY原創
2016-05-16 17:24:241012瀏覽

最近做一個項目,許多功能都是關於彈出框的,以前覺得彈出框就那一種,很容易實現,但是最近真的做起這個功能了,發現會好多自己考慮不到的問題。
例如關於一些添加,刪除,修改的彈出框,當添加一些用戶的時候,彈出框裡要提交一些關於用戶的信息,設置密碼等信息,當修改的時候,根據用戶的名字和id號來修改密碼等等。

範例如下:

複製程式碼 程式碼如下:



  • 藍楓前端

    新增詢盤【10

    追蹤詢盤【1000



    li>




  • 藍楓前端

    新增詢價【10

    追蹤詢盤【1000








  • 藍楓前端

    新增詢價【10

    追蹤詢盤【1000








  • 藍楓前端

    新增詢價【10

    追蹤詢盤【1000








  • 藍楓前端

    新增詢盤【10

    追蹤詢盤【1000










  • 彈出框內容:


    複製程式碼 程式碼如下:




    實作的彈出框的js
    複製程式碼程式碼如下:

    程式碼如下:


    程式碼如下:


    碼🎜>$(function(){
    var $window = $(視窗),
    $doc = $(文檔),
    $body = $('body');
    //關於管理者加入刪除的js程式碼
    var tabLi=$(".tabPanel").find("li");
    tabLi.hover(function(){
    $(this).addClass( " href").siblings().removeClass("hover")
    },function(){})
    /*彈出框定位*/
    $(window).scroll(function() {
    var pwdTips =$(".pwdTips");
    var height=pwdTips.height();
    var width=pwdTips.width();
    var bodyWidth=$(window) ).width>var bodyWidth=$(window) ).width>var bodyWidth=$(window) ).width>var bodyWidth=$(window) ).width>var bodyWidth=$(window) ).width>var bodyWidth=$(window) ).width>var. ()

    if(!pwdTips.is(":hidden")){
    pwdTips.css({
    位置:“固定”,
    頂部:(bodyHeight- height)/ 2,
    左邊:(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({
    位置: '絕對',
    頂部: '0px',
    左:'0px',
    寬度:$window.scrollLeft() $window.width()'px',
    高度: $doc.height(),
    'z-index' : zindex
    });
    返回_bg;
    };

    /*彈出框半透明背景的設定*/
    /*綁定事件*/

    var bindClick = function( obj,handlerEvent){
    obj.bind( "click",function(e){
    e.preventDefault()
    bgShadow(1001);
    var select=$(this).attr( 'contentid'); $(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'))
    {
    $('#openname').attr('值',」);

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

    }
    其他
    {

    }
    其他
    {

    }
    其他
    {
    } 其他{ } 其他{ } 其他{ } 其他{ } 其他{ } 其他{ >$('#pwdRest').find('#userName').hide(); $('#openname').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中的onblur和onfocus事件應用介紹_基礎知識

    相關文章

    看更多