Question

我已经为JQuery实现了simplemodal插件。非常好btw！我遇到问题的地方是，我有一个从数据库生成的链接列表，当我点击一个时，我进行“加载”调用并将结果添加到我的osx-modal-content div。加载完成后如何调用osx插件？如果我将class = osx添加到我的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

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”类的按钮时显示对话框。

Answer 2

这就是我要做的事情：

修改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
                       });
               });
       }

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

-Eric

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

2 个答案: