SimpleModal OSX Style

Question

At the moment i have this code:

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

});

But when i launch the Dialog it isn't filled with the content.

it must be a simple mistake but i can't find it

Answer 1

In your "open" function, you reference "this.title"

I'm not a javascript expert, but I believe you lose the context of "this" as soon as you leave the "click" function (unless you are declaring/creating the function inside the click function itself).

So when you call the following:

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

this.title returns ""

If you hard-code in the value "#osx-modal-content-1", you'll find that it works

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