我想动态地在物化中创建模态。这是我的JavaScript代码:
$(document).ready(function(){
var modalContainer = $('<div id="modal_id" class="modal"></div>');
var modalContent = $('<div class="modal-content"><p>my content</p></div>');
modalContainer.append(modalContent);
modalContainer.modal(); // or modalContainer.modal('open');
});
这是我的触发按钮:
<a class="waves-effect waves-light btn modal-trigger" href="#modal_id">Show Modal</a>
但是,这是行不通的。 当我单击以Show Modal
锚点时,请向我显示模态的包装器,而不显示模态框。请帮助我。谢谢。
你可以用这个简单的方法做到这一点。创建一个空div
.modal
其中包含类以及要分配的任何id
。
然后在 jQuery 中,创建一个变量并使用类 modal-content
保存一个div
。在该div
指定消息或内容中,您希望动态添加。之后,使用该变量附加到模态$(.modal).append()
并使用.modal()
打开模态
看一下示例
我创建了一个jsfiddle
看看它。
演示 - jsFiddle
例
.HTML
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal"></div>
jQuery
$(document).ready(function(){
// Here specify your content or message, enclose between <p>
var content = '<div class="modal-content"><p>my content</p></div>';
$('.modal').append(content);
$('.modal').modal();
});
你可以像这样使用纯 JavaScript 在 1.0.0 上打开模态
const elem = document.getElementById('modalId here');
const instance = M.Modal.init(elem, {dismissible: false});
instance.open();
我写了一个小类来动态创建模态。请注意,设置高度和宽度有点问题,我真的不知道为什么。我只需要应用程序中的固定页脚模式,但可以轻松地动态设置该类以满足您的需求。无论如何,我希望它有所帮助:
class Modal {
constructor(opt) {
this.name = opt.name;
this.width = opt.width || '';
this.height = opt.height || '';
this.topMargin = opt.height ? Math.floor((100 - this.height) / 2) : '';
this.style = (opt.width && opt.height) ? 'width: ' + this.width + '%; height: ' + this.height + 'vh; top: ' + this.topMargin + 'vh;' : opt.width ? 'width: ' + this.width + '%;' : opt.height ? 'height: ' + this.height + 'vh; top: ' + this.topMargin + 'vh' : '';
this.footerButtons = opt.footerButtons || '';
this.openButton = opt.openButton || null;
this.title = opt.title || '';
this.onOpen = opt.onOpen;
this.fixedContent = opt.fixedContent || '';
this.template = '<div id="' + this.name + '" class="modal modal-fixed-footer" style="' + this.style + '"><div class="modal-content" style="padding-top: 17px;"><h4>' + this.title + '</h4><div class="divider"></div><br>' + this.fixedContent + '<div class="modal-content-dynamic"></div></div><div class="modal-footer">' + this.footerButtons + '</div></div>';
$('.container').append(this.template);
var self = this;
if (this.openButton) {
$(document).on('click', this.openButton, function () {
self.open();
});
}
}
open() {
$('#' + this.name).openModal({
dismissable: false,
preventScrolling: false
});
if (this.onOpen) this.onOpen(this);
}
close() {
$('#' + this.name).closeModal();
}
setContent(content) {
$('#' + this.name).find('.modal-content-dynamic').html(content);
}
addContent(content) {
$('#' + this.name).find('.modal-content-dynamic').append(content);
}
setTitle(title) {
$('#' + this.name).find('.modal-content h4').html(title);
}
setFooterButtons(buttons) {
$('#' + this.name).find('.modal-footer').html(buttons);
}
}
然后像这样使用它:
var testModal = new Modal({
name: 'testModal',
openButton: '#open_testModal',
title: '<b>TestModal</b>',
fixedContent: '<p>Some static content</p>',
onOpen: function (modal) {
// do something every time the modal is opened
}
});