Question

我有3个模式，它们都具有相同的格式，并由不同的onclicks激活（创建联系人，更新联系人，删除联系人）。我希望模态标题和模态体根据点击的按钮而改变。我如何创建一个函数，根据单击的按钮来附加模态内容？谢谢你的帮助！

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
            <p>Contact Created!</p>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>

Answer 1

我编写了JavaScript＆＃34; BootstrapModel＆＃34;为了同一目的而上课。

它还依赖于jQuery，所以在使用这个类之前不要忘记嵌入jQuery。

类是：

var BootstrapModal = (function (options) {
var defaults = {
    modalId: "#confirmModal",
    btnClose: "#btnClose",
    title: "Confirm",
    content: "Some bootstrap content",
    onClose: function () {
    },
    onSave: function () {
    }
};

defaults = options || defaults;

var $modalObj = $(defaults.modalId);

var hideModal = function () {
    $modalObj.modal("hide");
};

var showModal = function () {
    $modalObj.modal("show");
};

var updateModalTitle = function (title) {
    defaults.title = title;
    //$($modalObj).find(".modal-title").eq(0).html(title);
    $modalObj.find(".modal-title").eq(0).html(title);
};

var updateModalBody = function (content) {
    defaults.content = content;
    $modalObj.find(".modal-body").eq(0).html(content);
};

return {
    getDefaults: function () {
        return defaults;
    },
    hide: function () {
        hideModal();
    },
    show: function () {
        showModal();
    },
    updateTitle: function (title) {
        updateModalTitle(title);
        return this;
    },
    updateBody: function (body) {
        updateModalBody(body);
        return this;
    }
}
});

用法：

var emailModal = new BootstrapModal({modalId: "#confirmModal"});

emailModal.updateTitle("Mail sent successfully").updateBody("<br/>This box will automatically close after 3 seconds.").show();
// Hide the Modal
emailModal.hide();

模态的HTML结构：

<div class="modal fade" id="confirmModal" role="dialog" aria-labelledby="thankyouModal" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="padding-top: 225px">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="thankyouModal">Thank you</h4>
        </div>
        <div class="modal-body">
            Thank you. We'll let you know once we are up.
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

Answer 2

我解决这个问题的方法是从外部文件加载数据。所以你有你的模态框的初始声明（只是周围的div），然后在每个文件中你有其他模态的包含代码，然后使用一些jQuery来解雇它们：< / p>

HTML（在主文件中）

<div class="modal" id="modal-results" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

JQuery的

$('#create-contact').click(function(){
  e.preventDefault();
  $("#modal-results").html('create-contact.html');
  $("#modal-results").modal('show');
});

附加模态的功能

2 个答案: