1

我已经为 JQuery 实现了 simplemodal 插件。非常好顺便说一句！我遇到问题的地方是我有一个从数据库生成的链接列表，当我单击一个时，我会进行“加载”调用并将结果添加到我的 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 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 插件正在寻找输入或点击事件。我不确定如何在加载时编写“点击”事件的脚本。或者也许有更好的方法来调用插件。

包括：

4

2 回答 2

0

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

于 2009-09-23T19:07:21.533 回答
0

这是我要做的：

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

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

-埃里克

于 2009-09-23T21:19:44.530 回答