# CSS modal dialogues

In CSS3, modal dialogues are actually part of the page but is hidden, then becomes visible and takes the focus after an event, like a click event.

Let us implement the **Login** link with a modal form.

Edit **views\menu.dt** and append the modal form activation code:

```
div.menu-item
  a.item-link(href="/") Home
div.menu-item
  a.item-link(href="about") About us
div.menu-item
  a.item-link(href="contact") Contact us
div.menu-item
  a.item-link.item-link-right(href="#login") Login
div#login.modal-form
  div.modal-form-wrapper-login
    form.modal-form-grid(method="post", action="login")
      input.text-control(name="email", type="email", placeholder=" email address")
      input.text-control(name="password", type="password", placeholder=" password")
      input#but-reset(type="reset", value="Clear")
      input#but-submit(type="submit", value="Submit")
    a.close(href="#close") Cancel
```

We made a **div** with an **id** of “**#login**” so the link can point to it. After you compile and run, click on the **Login** link to activate the modal form:

<figure><img src="https://3936448450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjGPCKHCWMHsDLNzX2hV8%2Fuploads%2FlGaXM59FztbK10teB9Td%2Fimage31.png?alt=media&#x26;token=7f7c9aca-a9c3-45fd-b017-9ac815ed2466" alt=""><figcaption></figcaption></figure>

Edit the menu to make it more relevant to our final project.

Edit **views\menu.dt** to make it look like this:

```
div.menu-item
  a.item-link(href="/") Home
div.menu-item
  a.item-link(href="all_employees") All employees
div.menu-item
  a.item-link(href="#find_employee") Find employee
div.menu-item
  a.item-link(href="add_employee") Add employee
div.menu-item
  a.item-link.item-link-right(href="#login") Login
div#login.modal-form
  div.modal-form-wrapper-login
    form.modal-form-grid(method="post", action="login")
      input.text-control(name="email", type="email", placeholder=" email address")
      input.text-control(name="password", type="password", placeholder=" password")
      input#but-reset(type="reset", value="Clear")
      input#but-submit(type="submit", value="Submit")
    a.close(href="#close") Cancel
div#find_employee.modal-form
  div.modal-form-wrapper-find_employee
    form.modal-form-grid(method="post", action="find_employee")
      input.text-control(name="fname", type="text", placeholder=" First name", required)
      input.text-control(name="lname", type="text", placeholder=" Last name", required)
      input#but-reset(type="reset", value="Clear")
      input#but-submit(type="submit", value="Submit")
    a.close(href="#close") Cancel
```

Compile and run, then refresh the browser. Click on the **Find employee** link.

<figure><img src="https://3936448450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjGPCKHCWMHsDLNzX2hV8%2Fuploads%2FF8SGksklqP7zIfEL3Ar3%2Fimage32.png?alt=media&#x26;token=52b376c5-aa0f-4e6b-8344-a302c2359852" alt=""><figcaption></figcaption></figure>

So now we have a menu system closer to what we need for our project.

Time to talk about the web framework.