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!
*{
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!