How to create a new modal box for specific content, with different width and height? In peafowl.js
if I choose html and simple:
var modal_base_template = [
'<div id="', PF.obj.modal.selectors.root.replace("#", ""),
'"class="fullscreen '+overlay_background+'"><div id="',
PF.obj.modal.selectors.box.replace("#", ""),
'"class="clickable"><div id="', PF.obj.modal.selectors.body.replace("#", ""),
'">%MODAL_BODY% </div>%MODAL_BUTTONS%<span class="close-modal icon-close" data-action="close-modal"></span></div></div>'
].join("");
my different content
var modal_base_template = [
'<div id="', PF.obj.modal.selectors.root.replace("#", ""),
'"class="fullscreen '+overlay_background+'"><div id="',
PF.obj.modal.selectors.mybigbox.replace("#", ""),
'"class="clickable"><div id="', PF.obj.modal.selectors.body.replace("#", ""),
'">%MODAL_BODY% </div>%MODAL_BUTTONS%<span class="close-modal icon-close" data-action="close-modal"></span></div></div>'
].join("");
$(document).on("click", "[data-modal=mybigbox]", function(){
var $target = $("[data-modal=" + $(this).data("target") + "], #"+$(this).data("target")).first();
PF.fn.modal.call({template: $target.html(), buttons: false});
});
How can I decide on click?
Sorry for my bad english
if I choose html and simple:
var modal_base_template = [
'<div id="', PF.obj.modal.selectors.root.replace("#", ""),
'"class="fullscreen '+overlay_background+'"><div id="',
PF.obj.modal.selectors.box.replace("#", ""),
'"class="clickable"><div id="', PF.obj.modal.selectors.body.replace("#", ""),
'">%MODAL_BODY% </div>%MODAL_BUTTONS%<span class="close-modal icon-close" data-action="close-modal"></span></div></div>'
].join("");
my different content
var modal_base_template = [
'<div id="', PF.obj.modal.selectors.root.replace("#", ""),
'"class="fullscreen '+overlay_background+'"><div id="',
PF.obj.modal.selectors.mybigbox.replace("#", ""),
'"class="clickable"><div id="', PF.obj.modal.selectors.body.replace("#", ""),
'">%MODAL_BODY% </div>%MODAL_BUTTONS%<span class="close-modal icon-close" data-action="close-modal"></span></div></div>'
].join("");
$(document).on("click", "[data-modal=mybigbox]", function(){
var $target = $("[data-modal=" + $(this).data("target") + "], #"+$(this).data("target")).first();
PF.fn.modal.call({template: $target.html(), buttons: false});
});
How can I decide on click?
Sorry for my bad english
Last edited: