---
title: "JQuery Forms Inside a modal Example | Mobiscroll"
component: "Forms"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/forms/popup"
---

# Inside a modal - jQuery Forms demo

JQuery embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.

- [Live demo](https://demo.mobiscroll.com/jquery/forms/popup)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/form-components/forms/popup)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/popup.md), [Angular](https://demo.mobiscroll.com/angular/forms/popup.md), [React](https://demo.mobiscroll.com/react/forms/popup.md), [Vue](https://demo.mobiscroll.com/vue/forms/popup.md)

## Description

When working with the [event calendar](https://demo.mobiscroll.com/jquery/eventcalendar) 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 →](https://demo.mobiscroll.com/jquery/eventcalendar/create-read-update-delete-CRUD)

## What this demo shows

- This demo shows a modal form which opens a responsive popup form from a button.
- **Form fields** Includes fields for the title, description, start date, and end date.
- **All-day setting** Uses a toggle to switch between timed and all-day entries.
- **Availability** Uses a segmented control to mark the entry as busy or free.
- **Form actions** Provides Cancel and Set actions for dismissing or confirming the form.
- **Responsive layout** Combines multiple form controls within a modal interface that adapts to the available screen size.

## Best for

- **Calendar event forms** Create or edit event details without navigating away from the calendar.
- **Appointment scheduling** Collect a title, notes, timing, and availability in a focused popup workflow.
- **Availability management** Let users define timed or all-day availability and mark it as busy or free.
- **Compact data entry** Keep short forms accessible from the current page while preserving the surrounding context.
- **Responsive workflows** Present the same modal form across desktop and mobile layouts.

## Tutorial

```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>
```

```js
var $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();
});
```

## API used in this demo

- [`buttons`](https://mobiscroll.com/docs/jquery/popup/api#opt-buttons) - option
- [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option
- [`responsive`](https://mobiscroll.com/docs/jquery/popup/api#opt-responsive) - option
- [`width`](https://mobiscroll.com/docs/jquery/popup/api#opt-width) - option
- [`fullScreen`](https://mobiscroll.com/docs/jquery/popup/api#opt-fullScreen) - option
- [`touchUi`](https://mobiscroll.com/docs/jquery/popup/api#opt-touchUi) - option
- [`setOptions`](https://mobiscroll.com/docs/jquery/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/jquery/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/jquery/popup/api#method-open) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  var popup = $('#my-popup')
    .mobiscroll()
    .popup({
      buttons: ['set', 'cancel'],
      display: 'anchored',
      contentPadding: false,
      responsive: {
        medium: {
          display: 'anchored',
          width: 400,
          fullScreen: false,
          touchUi: false,
        },
      },
    })
    .mobiscroll('getInst');

  $('#show-popup').on('click', function (event) {
    popup.setOptions({
      anchor: event.target,
    });
    popup.open();
  });
});
```

### HTML

```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>
```

## Implementation notes

- `Popup` renders arbitrary content as children; the demo places two `mbsc-form-group` blocks inside it containing an `Input` (Title), a `Textarea` (Description), a `Switch` (All-day), two more `Input`s (Starts/Ends), and a `SegmentedGroup` with two segments (Show as busy/free).
- `buttons: ['set', 'cancel']` renders Set/Cancel action buttons in the popup's footer.
- `display: 'anchored'` anchors the popup to a trigger element rather than centering it; `anchor` is the DOM element it positions against. In JS/jQuery, `anchor` is applied via `.setOptions({ anchor: event.target })` right before calling `.open()`; React/Vue bind it as an `anchor`/`:anchor` prop driven by state set to `event.target` on click.
- `contentPadding: false` removes the popup's default inner padding so the form fields control their own spacing.
- `fullScreen: true` makes the popup fill the screen; `responsive: { medium: { display: 'anchored', width: 400, fullScreen: false, touchUi: false } }` overrides `display`, `width`, `fullScreen`, and `touchUi` at the `medium` breakpoint so larger screens get a fixed-width anchored panel with desktop (non-touch) styling instead of the full-screen mobile layout.
- Opening the popup is imperative in JS/jQuery and Angular, declarative in React/Vue: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once on the popup element to get it; either way, the button's click handler then calls `.setOptions({ anchor: event.target })` followed by `.open()`; Angular keeps a `@ViewChild` reference (`inst: MbscPopup`), sets `popupSettings.anchor = event.target`, and calls `inst.open()`; React and Vue instead bind the popup's `isOpen`/`:isOpen` prop to state that the button's click handler sets to `true` (along with an `anchor`/`:anchor` state update), and reset that state through an `onClose`/`@close` callback.
- Inside the popup, the `Switch`'s checked state marks the entry as all-day; the two `Segmented` controls share a `name` so they behave as a mutually exclusive pair (`checked`/`defaultChecked` marks the default selection) recording busy/free availability.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-jquery.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config jquery
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Responsive form](https://demo.mobiscroll.com/jquery/forms/responsive.md) - Responsive JQuery form using grid layout. Define how the form elements behaves across multiple screen sizes.