html / javascript中的可重用模式

Question

我有以下弹出模式：

<div class="modal-wrapper" style="display: block;">
    <div class="modal-popup-margin">
        <div class="modal-popup">
            <div class="modal-header">
                <button type="button" class="close close-modal">×</button>
                <span class="modal-title">Change Password</span>
            </div>
            <div class="modal-body">
                <div class="row">
                     <span class="label">Old Password</span>
                     <input class="Textinput form-control ng-pristine ng-untouched ng-invalid old-password ng-invalid-required" value="" type="password" name="oldPassword" />
                </div>
                <div class="row">
                     <span class="label">New Password</span>
                     <input class="Textinput form-control ng-pristine ng-untouched ng-invalid new-password ng-invalid-required" value="" type="password" name="newPassword" />
                </div>
                <div class="row error-row">
                     <span class="label">&nbsp;</span>
                     <span class="error-message"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary submit">SAVE</button>
                <button type="button" class="btn btn-default-flat-goog pull-right close-modal">CANCEL</button>
            </div>

        </div>
    </div>
    <div class="modal-backdrop close-modal"></div>
</div>

它意味着可重复使用，因为我将为每个调用它的项目定义以下内容：

• modal-footer中包含的名称或按钮。
• 模态主体中的各个字段，现在都是row 。
• 模态名称，以modal-title 。
• 单击“ SAVE按钮时，表单提交的url 。

我如何在这里创建“可重用”表单，而无需将相同的模式复制粘贴到每个模板中并重写其中的可变部分？

Answer 1

为此，如果您不想使用框架，建议使用javascript注入HTML。 您的html内部非常基本的构建器函数：

function makeModal(buttonshtml, bodyhtml, title, saveurl){
  return `<div class="modal-wrapper" style="display: block;">
<div class="modal-popup-margin">
    <div class="modal-popup">
        <div class="modal-header">
            <button type="button" class="close close-modal">×</button>
            <span class="modal-title">${title}</span>
        </div>
        <div class="modal-body">
            ${bodyhtml}
        </div>
        <div class="modal-footer">
            ${buttonshtml}
        </div>
    </div>
</div>
<div class="modal-backdrop close-modal"></div>
</div>`
}

但是，我看不到任何保存按钮或表单。