モーダル

px2style.modal({
    "body": "<p>モーダルコンテンツ</p><p>モーダルコンテンツ</p><p>モーダルコンテンツ</p>",
});

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();
        }
    }
);

(()=>{
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(){
    }
);
})();

• Open normal modal dialog contains long contents.
• Open normal modal dialog with 700px width.
• Open normal modal dialog with form.
• Open normal modal dialog with form contains long contents.
• Open modal dialog to target DIV element.
• Open normal modal dialog with secondary button.
• Replace modal body.