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는"

내가 자바 스크립트 전문가가 아니에요 참조하지만, 저는 믿습니다 "클릭"기능을 떠나 자마자 (이 함수를 선언/작성하지 않는 한 "this"의 컨텍스트를 잃게됩니다.

그래서 다음 호출 할 때 :

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

this.title 반환 "모달 콘텐츠-1 OSX에"#의, 당신은거야 "

가치에 당신이 하드 코딩이" 작동하는지 확인하십시오.

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