SimpleModal OSX風格

Question

目前，我有這樣的代碼：

<!-- modal content --> 
    <div id="osx-modal-content-1"> 
    <div id="osx-modal-title">OSX Style Modal Dialog</div> 
    <div class="close"><a href="#" class="simplemodal-close">x</a></div> 

    <div id="osx-modal-data"> 
    <h2>Hello! I'm SimpleModal!</h2> 
    <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p> 
    <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p> 
    <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p> 
    <p><button class="simplemodal-close">Close</button> <span>(or click the overlay)</span></p> 

    </div> 
    </div> 


jQuery(function ($) { 

var OSX = { 
    container: null, 
    init: function() { 
    $("area.osx, input.osx, a.osx").click(function (e) { 
    e.preventDefault(); 

    $('#osx-modal-content-' + this.title).modal({ 
    overlayId: 'osx-overlay', 
    containerId: 'osx-container', 
    closeHTML: null, 
    minHeight: 80, 
    opacity: 65, 
    position: ['0',], 
    overlayClose: true, 
    onOpen: OSX.open, 
    onClose: OSX.close 
    }); 
    }); 
    }, 
    open: function (d) { 
    var self = this; 
    self.container = d.container[0]; 
    d.overlay.fadeIn('slow', function() { 
    $("#osx-modal-content-" + this.title, self.container).show(); 
    var title = $("#osx-modal-title", self.container); 
    title.show(); 
    d.container.slideDown('slow', function() { 
    setTimeout(function() { 
     var h = $("#osx-modal-data", self.container).height() 
     + title.height() 
     + 20; // padding 
     d.container.animate(
     {height: h}, 
     200, 
     function() { 
     $("div.close", self.container).show(); 
     $("#osx-modal-data", self.container).show(); 
     } 
    ); 
    }, 300); 
    }); 
    }) 
    }, 
    close: function (d) { 
    var self = this; // this = SimpleModal object 
    d.container.animate(
    {top:"-" + (d.container.height() + 20)}, 
    500, 
    function() { 
    self.close(); // or $.modal.close(); 
    } 
    ); 
    } 
}; 

OSX.init(); 

}); 

但是，當我啓動對話框它不填充內容。

它必須是一個簡單的錯誤，但我不能找到它

Answer 1

在你的「開放式」功能，您引用「this.title」

我不是一個JavaScript專家，但我相信只要您離開「點擊」功能，就會丟失「this」的上下文（除非您在click函數本身內部聲明/創建函數）。

所以，當你調用如下

d.overlay.fadeIn('slow', function() { 
         $("#osx-modal-content-" + this.title, self.container).show(); 

this.title返回「」

如果價值，你硬編碼「＃OSX模態化內容1」，你會發現它的工作原理

d.overlay.fadeIn('slow', function() { 
         alert(this.title); 
         $("#osx-modal-content-1" , self.container).show();