How to create a simple modal window form with Django and JqueryUI and communicate via Ajax Part 2

25 Mar 2022
jQueryUI Django

Hello, this is a follow-up to this article.

In the previous article, we showed how to create a modal window with AJAX using Django and jQueryUI. However, while jQueryUI is easy to implement, its visual design is outdated for modern web development.

To achieve a more current look, the CSS needs to be updated.

The CSS I am going to introduce is designed similarly to this blog of ours, in this article.

If any users want to use this design as a reference, please refer to the CSS we will introduce. While some may think they can design it better than me, please forgive my poor taste in design!

Before changing css

After changing css

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

body{
    background-color: #262626;
    width: auto;
    height: 100vh;
}

.button{
    width: 100vw;
    height: auto;

    display: flex;
    flex-direction: column;
}

.button__title{
    width: auto;
    margin: 2rem;
    color: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;
}

.button__area{
    width: auto;
    margin: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

.button__click{
    width: 4rem;
    height: 2rem;
}

/***************************
Modal design CSS from here
****************************/

body .ui-widget.ui-widget-content{
   border: 5px solid #025B18;
}

body .ui-widget-content{
    border: 1px solid #025B18;
    background-color: #262626;
}

body .ui-widget-header{
    border: 2px solid #025B18;
    background-color: #262626;
}

.ui-dialog-title{
    color:#1FC742;
}

/***************************
Button at the bottom of the modal
****************************/

.ui-dialog-buttonset button,
.ui-dialog-buttonset button:focus {
    color:#1FC742;
    background-color: #262626;
    border: 2px solid #025B18;
}

.ui-dialog-buttonset button:hover{
    color: #262626;
    background-color: #1FC742;
    border: 2px solid #025B18;
}

/***************************
Close button in the upper right corner of the modal
****************************/

button .ui-dialog-titlebar-close{
    background-color: #262626;
    border: 2px solid #025B18;
}

.ui-button-icon.ui-icon.ui-icon-closethick {
    background-color: #262626;
}

.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    border: 2px solid #025B18;
}

.ui-icon {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_025B18_256x240.png) !important;
}

/********************
field of form, not the default component of jqueryUI.
*********************/

.click__confirm{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-gap:0.5rem;
}

.form_field{
    background: #262626;
    color:#1FC742;
    height:2rem;
    border: 1px solid #025B18;
    border-radius: 4px;
}

.form_field:focus{
    color:#1FC742;
    height:2rem;
    border: 2px solid #1FC742;
    border-radius: 4px;
    outline: none
}

.click__label{
   color:#1FC742;
}

.success_message{
    color:#1FC742;
}

/********************
Remove arrows from input fields of the type where numbers are entered
*********************/

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

There are a few things to note in this CSS.

  • The CSS above was written without using !important as much as possible, but it can be easier to write CSS if you don't hesitate to use it.
  • The jQueryUI documentation provides guidance on changing CSS. To understand which classes are available in jQueryUI, it's helpful to look at this page first.
  • I had difficulty replacing the "x" icon with a new color in the upper right corner of the modal window. However, I discovered that jQueryUI provides a function to change the color and size of icons. Please see this Stack Overflow page.
  • This point is not directly related to jQueryUI, but the default input field in the browser displays arrows to increase/decrease the number. However, I find these arrows a bit unsightly. Therefore, I used the accompanying code to remove them.
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

I have placed this repository in this branch of the same repository as the previous article. For your reference, happy coding!