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();

});

但是当我启动Dialog时，它没有填充内容。

这一定是一个简单的错误，但我找不到它

Answer 1

在“打开”功能中，您引用“this.title”

我不是javascript专家，但是我相信一旦你离开“点击”功能就会失去“this”的上下文（除非你在click函数本身内声明/创建函数）。

所以当你拨打以下电话时：

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

this.title返回“”

如果您对值“＃osx-modal-content-1”进行硬编码，您会发现它可以正常工作

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