JQuery Forms Inside a modal Example

When working with the event calendar you will usually want to show an add/edit form in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.

Interested in add/edit screens for events? Check out this example of a fully functional event form →

Download and try example

Javascript jQuery Angular React Vue

html<button mbsc-button id="show-popup">
    Show modal
</button>
<div id="my-popup">
    <div class="mbsc-form-group">
        <label>
            <input mbsc-input data-label="Title" />
        </label>
        <label>
            <textarea mbsc-textarea data-label="Description"></textarea>
        </label>
    </div>
    <div class="mbsc-form-group">
        <label>
            <input mbsc-switch type="checkbox" data-label="All-day" />
        </label>
        <label>
            <input mbsc-input data-label="Starts" />
        </label>
        <label>
            <input mbsc-input data-label="Ends" />
        </label>
        <label>
            Show as busy
            <input mbsc-segmented name="status" type="radio" checked />
        </label>
        <label>
            Show as free
            <input mbsc-segmented name="status" type="radio" />
        </label>
    </div>
</div>
                                     
jsvar $btn = $('#show-popup');
popup = $('#my-popup').mobiscroll().popup({
    buttons: [
        'set',
        'cancel'
    ],
    display: 'anchored',
}).mobiscroll('getInst');

$btn.on('click', function (event) {
    popup.setOptions({
        anchor: event.target
    });
    popup.open();
});
                                     