Question

我正在编写一个Web应用程序，我希望在div的onClick事件上以编程方式加载JQuery。这里是div html代码

<div class="button_left"
            onClick="manageAlert('/abc/com')"><span>Click here</span></div>

这里是叠加div

<div id="ad_alert_wizard">This is test</div>

和JavaScript代码如下。

function manageAlert(url)
{
    if(url=="")
    {
          $("#ad_alert_wizard").overlay({
                // custom top position
                top: 260,

                // some mask tweaks suitable for facebox-looking dialogs
                mask: {

                    // you might also consider a "transparent" color for the mask
                    color: '#000000',

                    // load mask a little faster
                    loadSpeed: 200,

                    // very transparent
                    opacity: 0.5
                },

                // disable this for modal dialog-type of overlays
                closeOnClick: false,

                //load it immediately after construction
                load: true
            });
    }
    else
    {
        location.href=url;
    }
}

现在的问题是这样，当我点击div时，叠加层第一次正确加载...并且在关闭它之后，当我再次点击div时它不会加载直到我刷新页面。可能是错误..我正在使用JQuery Tools for overlay.

Answer 1

如果我正确理解了您的问题，您希望控制叠加层何时加载，何时关闭它取决于某些条件。正如它在jQuery工具网站上所说的，它的所有元素都有一些API，你必须使用它。首先，创建和设置叠加层，我建议使用$（document）.ready，如下所示：

$(document).ready(function () {
          //create vars for some performance reasons
          var adwiz = $("#ad_alert_wizard"),
              adOver = {};

          //setup your overlay object;
          adwiz.overlay({
                //do not load it automatically;
            load: false
                //... some other configuration options ...  
          });

          //take access to the overlay object and it's API;
          adOver = adwiz.data('overlay');

          //It's your click handler function
          // You can control your overlay as you wish.
         function manageAlert(url){
           if(url==""){
            adOver.load(); //show your overlay whenever you want
           }
          else{
            location.href=url;
          }
    }

 // set your event handlers inside the script, not in the DOM element (it's not cool)
    $('.button_left').click(function () {
        manageAlert(''); // call your handler function
    })
})

代码可以重构，但一个想法是访问您的覆盖对象来控制它。

JQuery Overlay仅加载一次

1 个答案: