サンプル
Minimum modal sample
px2style.modal({
"body": "<p>モーダルコンテンツ</p><p>モーダルコンテンツ</p><p>モーダルコンテンツ</p>",
});
Full optioned modal sample
var modalObj = px2style.modal({
"title": "Maximum Options Modal Sample",
"type": "modal",
"body": document.getElementById('cont-modal-maximum-options').innerHTML,
"width": 800,
"height": 600,
"contentFill": true,
"buttons": [
$('<button class="px2-btn px2-btn--primary">').text('OK button'),
],
"buttonsSecondary": [
$('<button class="px2-btn px2-btn--secondary">').text('Cancel button'),
],
"target": "body",
"form": {
"action": "javascript:void(0);",
"method": "get",
"submit": function(){
console.info('Form has submitted.');
},
},
"onclose": function(){
console.info('Modal has closed.');
},
"onbgclick": function(){
console.info('Modal background has clicked.');
},
}, function( modalObj ){
console.info('Modal has opened.', modalObj);
});
モーダルコンテンツにインタラクティブな表現を含めるサンプル
ノーマルなモーダルのサンプル
タイトルなし、ボタンなしのサンプル
px2style.modal(
{
body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',
buttons: [],
}
);
ボタンがたくさんあるサンプル
ドロワーのサンプル
px2style.modal(
{
title: 'Sample Drawer.',
type: 'drawer-left',
target: '.contents',
body: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',
buttons: [
'<button class="px2-btn px2-btn--primary" onclick="px2style.closeModal();">OK</button>'
],
onbgclick: function(){
px2style.closeModal();
}
}
);
多重に開くサンプル
tabindexされる新しい要素をあとから追加するサンプル
(()=>{
const $body = $('<div><p>Sample Content.</p><p>Sample Content.</p></div>');
px2style.modal(
{
body: $body,
buttons: [],
},
function(){
$body.append('<div class="px2-p">INPUT: <input type="text" /></div>');
}
);
})();
ウィンドウにフィットするサイズのサンプル
(()=>{
const $body = $('<div style="background-color: #eef;"><p>Sample Content.</p><p>Sample Content.</p></div>');
px2style.modal(
{
title: "ウィンドウにフィットするダイアログ",
body: $body,
width: "100%",
height: "100%",
contentFill: true,
},
function(){
}
);
})();
その他のサンプル