{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5c557435-c052-4622-8023-81ed6f63f231",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension('modal')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a44c5eae-9c73-4626-96ff-019cf959d647",
   "metadata": {},
   "source": [
    "The `Modal` layout provides a dialog windows on top of the layout. It is built on-top of [a11y-dialog](https://a11y-dialog.netlify.app/). It has a list-like API with methods to `append`, `extend`, `clear`, `insert`, `pop`, `remove` and `__setitem__`, which make it possible to interactively update and modify the layout. Components inside it are laid out like a `Column`.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **`open`** (boolean): Whether to open the modal.\n",
    "* **`show_close_button`** (boolean): Whether to show a close button in the modal.\n",
    "* **`background_close`** (boolean): Whether to enable closing the modal when clicking outside the modal.\n",
    "\n",
    "#### Methods:\n",
    "\n",
    "* **`show`**: Show the modal.\n",
    "* **`hide`**: Hide the modal.\n",
    "* **`toggle`**: toggle the modal.\n",
    "* **`create_button`**: Create a button which can either show, hide, or toggle the modal.\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2b3a8784-7e78-4414-a1a5-600b0ff14664",
   "metadata": {},
   "source": [
    "A `Modal` layout can either be instantiated as empty and populated after the fact or using a list of objects provided as positional arguments. If the objects are not already panel components they will each be converted to one using the `pn.panel` conversion method."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fd46bf9-a63e-457c-bcc2-a1578b8f9bda",
   "metadata": {},
   "outputs": [],
   "source": [
    "w1 = pn.widgets.TextInput(name='Text:')\n",
    "w2 = pn.widgets.FloatSlider(name='Slider')\n",
    "\n",
    "modal = pn.Modal(w1, w2, name='Basic FloatPanel', margin=20)\n",
    "toggle_button = modal.create_button(\"toggle\", name=\"Toggle modal\")\n",
    "\n",
    "pn.Column('**Example: Basic `Modal`**', toggle_button, modal)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "558852dd-9a11-4099-bae3-6da3e38f79f9",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `Modal` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b49ed4d6-b06b-47e1-a917-88ff3141936b",
   "metadata": {},
   "outputs": [],
   "source": [
    "modal.controls(jslink=True)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}