代码之家 › 专栏 › 技术社区 › mikepenz

单峰OSX样式

modal-dialog dialog macos jquery

mikepenz · 技术社区 · 15 年前

现在我有了这个代码:

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

});

但是,当我启动对话框时,它没有填充内容。

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

1 回复 | 直到 15 年前

Brandon Boone 15 年前

在“open”函数中,引用“this.title”

我不是一个javascript专家,但我相信一旦您离开“click”函数(除非您在click函数内部声明/创建函数),您就会失去“this”的上下文。

因此,当您调用以下命令时:

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