html/javascript中的可重用模态
html/javascript中的可重用模态
提问于 2018-10-20 02:40:30
我有以下弹出模式：
<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"> </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-title.
- The 中，在
modal-title. - The
- 中，表单在单击
SAVE按钮时提交到的名称或按钮，这些名称或按钮包含在模式正文的各个字段中，现在是模式的row. - The名称。
我如何在这里创建一个“可重用”的表单，而不是复制-粘贴相同的模式到每个模板中，并重写它的可变部分？
回答 1
Stack Overflow用户
发布于 2018-10-20 11:56:13
为此，如果您不想使用框架，我建议使用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>`
}但是，我没有看到任何保存按钮或表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52898242
复制相关文章
相似问题
腾讯云开发者
