Javascript 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 = document.getElementById('show-popup');
var popup = mobiscroll.popup('#my-popup', {
    buttons: [
        'set',
        'cancel'
    ],
    display: 'anchored',
});

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