几个动态的简单模块

时间:2011-04-27 22:47:10

标签: javascript jquery dynamic modal-dialog simplemodal

我正在开发一个网站,用户可以在其中创建日历,然后向其添加事件。我的一个页面列出了用户创建的所有日历。我希望每个日历标题旁边都有一个“删除”链接,并弹出一个简单的模式框,以便他们确认他们打算删除日历及其所有相关事件。我需要以某种方式将calendar_id号附加到jquery,以确保弹出正确的模式框,并显示正确的“是,删除”链接。我只是将calendar_id附加到#basic-modal和#basic-modal-content id名称,但CSS不匹配。

我认为我能以某种方式做的另一件事就是将正确的“是,删除”链接传递到带有功能的模态框中。但我不知道如何在模态框中注入html ......就像这样......

function getsimplemodal(X){

$('#basic-modal .basic').click(function (e) {

var delete_link = "http://mysite.com/delete.php?cal_id=" +X;
--code to inject delete_link into the modal box--       
    $('#basic-modal-content').modal();

    return false;

});};

有谁知道世界上我能做到这一点?

尝试下面的代码来测试我是否可以附加任何内容,但它破坏了代码。什么都没显示。如果我删除.append行,则显示。

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
("#basic-modal-content").append("<strong>Testing</strong>");

    $('#basic-modal-content').modal();

    return false;

});

});

想通了!

我写了一个函数来使用onclick我的链接。

function confirmCalendar(X) {

    $('#basic-modal-content').modal();
    var delete_link = "<a href='http://localhost:8888/calendars/index.php/edit_calendar/delete/" + X + "'>Yes, Delete</a> ";
    $('#modal-p').prepend( delete_link );

    return false;

};

然后是我隐藏的#basic-modal-content

<!-- modal content -->
<div id="basic-modal-content">
<h3>Are you sure you want to delete this calendar and all its associated bookings?</h3>
<p id="modal-p"> or <a href='#' class='simplemodal-close'>Cancel</a></p>
</div>

然后是我的动态链接

echo "<a href='#' onclick='confirmCalendar($row->id);'>Delete</a>";

1 个答案:

答案 0 :(得分:0)

要注入的代码:

$("#basic-modal-content").append("<a href=" + delete_link + "> Delete </a>");