尝试在poplight弹出窗口中访问其他变量

时间:2015-10-26 03:22:58

标签: jquery css popup

使用轻量级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>

无论如何都可以在弹出的内容中访问a和b。格

2 个答案:

答案 0 :(得分:0)

我很聪明所以我应该告诉你//关闭弹出窗口和淡化图层

`$('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 <=== change remove to add

答案 1 :(得分:0)

只需使用数据属性:

<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
 .....................
 .....................