Vibe.d tutorial
  • Build web apps with Vibe.d
  • Setting up
  • The default hello world app
  • Use your own HTML page
  • Serving other static files
  • Diet templates
  • More template pages
  • Use your own functions
  • Templates for ease of maintenance
  • Using include in templates
  • Responsive layout using CSS Grid
  • A fixed navbar and sticky footer
  • CSS modal dialogues
  • The web interface
  • Setting up MySQL server and tools
  • The schema
  • Setting up MySQL for Vibe.d
  • The EmployeeController class
  • The EmployeeModel class
  • A form for adding a new employee
  • Saving form data into the database
  • Testing the whole thing
  • Listing all the employees
  • Retrieving a record for editing
  • Saving form changes to the database
  • Deleting a record from the database
  • Finding an employee record by name
  • Displaying error messages with _error
  • Authentication and authorization
  • Logging in and authentication
  • Saving the login state to the session
  • Enforcing authorization through the session
  • Logging out
  • All the sources so far
  • A new project
    • The timekeeping system
Powered by GitBook
On this page

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:

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.

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

Time to talk about the web framework.

PreviousA fixed navbar and sticky footerNextThe web interface

Last updated 2 years ago