jquery - 尝试访问 poplight 弹出窗口中的其他变量

Question

使用轻量级 poplight 弹出窗口，想知道是否有人可以看到我如何使用额外的变量。

这是弹出窗口:https://kaushikresearch.wordpress.com/jquery/popup-with-jquery

这是 popup.js:

function popUp(CloseImagePath){

    //When you click on a link with class of poplight and the href starts with a #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        //$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src='+CloseImagePath+' class="btn_close" title="Close Window" alt="Close" border="0px" /></a>');

        //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

        return false;
    });

    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
        });
        return false;
    });
}

它是这样调用的:

<a href=”#?w=500″ rel=”popup_name” class=”poplight”>Open Popup Window</a>

我想知道当我这样调用它时是否:

<a href=”#?w=500&a=10&b=20″ rel=”popup_name” class=”poplight”>Open Popup Window</a>

无论如何都可以在“弹出”div 中访问 a 和 b

Answer 1

像这样使用数据属性:

<a href=”#?w=500″ rel=”popup_name” class=”poplight” data-a="10" data-b="20">Open Popup Window</a>

在 js 中:

 var popID = $(this).attr('rel'); //Get Popup Name
 var popURL = $(this).attr('href'); //Get Popup href to define size
 var a = $(this).data('a'); // get data value a
 var b = $(this).data('b'); // get data value b
 .....................
 .....................