如何以编程方式调用 simplemodal osx 插件？

Question

我已经实现了 JQuery 的 simplemodal 插件。顺便说一句，非常好！我遇到的问题是，我有一个从数据库生成的链接列表，当我单击其中一个时，我会进行“加载”调用并将结果添加到我的 osx-modal-content div 中。加载完成后如何调用 osx 插件？如果我将 class=osx 添加到我的 a href，模式会在内容进入 div 之前打开。

我的加载 html 的功能：

function loadContent(id) {
        $("#osx-modal-dialog").load("Item.cfm?ID="+id+"");
        // call OSX here????
        $('#osx-modal-dialog').modal();
    }

我的 DIV：

<div id="osx-modal-dialog">
  <div id="osx-modal-content">
<div id="osx-modal-title">Title</div>
<div id="osx-modal-data">
    <h2>Summary</h2>
    <p>Description</p>
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
  </div>
</div>

当前 osx 插件正在寻找输入或单击事件。我不确定如何在负载后编写“点击”事件脚本。或者也许有更好的方法来调用插件。

包括：

Answer 1

这是我要做的：

修改 OSX 内容（我删除了大部分内容并添加了占位符）：

       

<div id="osx-modal-content">
               <div id="osx-modal-title">OSX Style Modal Dialog</div>
               <div id="osx-modal-data">
                       <div id="osx-data-placeholder"></div>
                       <p><button class="simplemodal-close">Close</button> <span>(or press
ESC or click the overlay)</span></p>
               </div>
       </div>

您的 loadContent 函数

：      

function loadContent(id) {
               var d = $('#osx-modal-content');

               // load your page
               $.get("Item.cfm?ID=" + id, function(data) {

                       // replace the placeholder with the results
                       $('#osx-data-placeholder', d[0]).html(data);

                       // open the osx modal
                       d.modal({
                               overlayId: 'osx-overlay',
                               containerId: 'osx-container',
                               closeHTML: '<div class="close"><a href="#"
class="simplemodal-close">x</a></div>',
                               minHeight:80,
                               opacity:65,
                               position:['0',],
                               overlayClose:true,
                               onOpen:OSX.open,
                               onClose:OSX.close
                       });
               });
       }

我还没有测试过，但我很确定这应该可以解决问题。

-埃里克

Answer 2

load 方法有一个回调参数，您可以在其中提供一个在加载完成时执行的函数。使用此回调来触发对话框。

function loadContent(id) {
    $("#osx-modal-dialog").load("Item.cfm?ID="+id+"", function() {
        $('input.show-info').unbind('click') // remove any existing handlers
                            .click( function() { // bind click on button to show dialog
             $('#osx-modal-dialog').modal();
        });
    });
}

更新：我已更新此内容以展示如何在 load() 的回调中添加点击处理程序，但我不知道您要处理什么事件，也不知道该事件在哪个元素上触发。我假设您希望在单击“show-info”类的按钮时显示对话框。