JQuery Overlay 只加载一次

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
    })
})

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