Modal Popup
v1
index.html
This code recreates the modal popup with:
- Responsive layout using Bootstrap's grid system and utilities
- Custom styling for the search button, user list, and action buttons
- Proper spacing and typography matching the design
- Bootstrap's built-in modal component
- Custom styles for the purple and orange accent colors
- Responsive image handling for user avatars
- Form controls styled to match the design
To use this:
- The modal can be triggered using Bootstrap's modal JavaScript methods
- The user list can be dynamically populated using JavaScript
- The search functionality can be implemented by adding an event listener to the search input
- The form submission can be handled by adding event listeners to the Send and Repeat buttons
The modal will be responsive across different screen sizes while maintaining the clean, professional look of the original design.
212d ago
Modal Popup SCSS
v1
index.html
// Variables
$primary-color: #4B0082;
$secondary-color: #FFA500;
$border-color: #E5E5E5;
$text-primary: #333333;
$text-secondary: #666666;
$warning-color: #DC3545;
$white: #FFFFFF;
// Mixins
@mixin flex-center {
display: flex;
align-items: center;
}
@mixin button-base {
padding: 8px 24px;
border: none;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.9;
}
}
// Modal Overlay
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
// Modal
.custom-modal {
width: 100%;
max-width: 550px;
background: $white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
.modal-content {
width: 100%;
}
// Header
.modal-header {
@include flex-center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid $border-color;
h5 {
margin: 0;
font-size: 18px;
color: $text-primary;
}
.close-btn {
background: none;
border: none;
font-size: 24px;
color: $text-secondary;
cursor: pointer;
padding: 0;
line-height: 1;
}
}
// Body
.modal-body {
padding: 24px;
// Search Section
.search-section {
margin-bottom: 16px;
.search-box {
position: relative;
input {
width: 100%;
padding: 10px 12px;
border: 1px solid $border-color;
border-radius: 4px;
font-size: 14px;
&:focus {
outline: none;
border-color: $primary-color;
}
}
.search-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 48px;
background: $primary-color;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
svg {
fill: $white;
}
}
}
}
// Role Dropdown
.role-dropdown {
margin-bottom: 16px;
select {
width: 100%;
padding: 10px 12px;
border: 1px solid $border-color;
border-radius: 4px;
font-size: 14px;
color: $text-primary;
background-color: $white;
&:focus {
outline: none;
border-color: $primary-color;
}
}
}
// Recipients List
.recipients-list {
margin-bottom: 24px;
h6 {
margin-bottom: 16px;
font-size: 14px;
color: $text-primary;
}
.recipient-item {
@include flex-center;
padding: 12px 0;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.recipient-info {
h6 {
margin: 0 0 4px 0;
font-size: 14px;
}
p {
margin: 0;
font-size: 12px;
color: $text-secondary;
}
}
}
}
// Message Area
.message-area {
margin-bottom: 24px;
textarea {
width: 100%;
height: 120px;
padding: 12px;
border: 1px solid $border-color;
border-radius: 4px;
resize: none;
font-size: 14px;
&:focus {
outline: none;
border-color: $primary-color;
}
}
.warning-text {
margin-top: 8px;
font-size: 12px;
color: $warning-color;
}
}
// Date Picker
.date-picker {
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: $text-primary;
}
input {
width: 100%;
padding: 10px 12px;
border: 1px solid $border-color;
border-radius: 4px;
font-size: 14px;
&:focus {
outline: none;
border-color: $primary-color;
}
}
}
}
// Footer
.modal-footer {
@include flex-center;
justify-content: flex-start;
padding: 16px 24px;
border-top: 1px solid $border-color;
gap: 12px;
.btn-send {
@include button-base;
background-color: $primary-color;
color: $white;
}
.btn-repeat {
@include button-base;
background-color: $secondary-color;
color: $white;
}
}
}
// Responsive Styles
@media (max-width: 576px) {
.custom-modal {
margin: 16px;
max-height: calc(100vh - 32px);
overflow-y: auto;
.modal-body {
padding: 16px;
}
.modal-footer {
padding: 16px;
flex-direction: column;
button {
width: 100%;
}
}
}
}This implementation:
- Uses SCSS with proper nesting and organization
- Includes responsive design for mobile devices
Matches the exact design from the image with:
- Purple primary color (
#4B0082) - Orange secondary color for the Repeat button
- Proper spacing and typography
- Rounded corners and subtle shadows
- Custom styled form elements
- Purple primary color (
Features:
- Hover states for buttons
- Focus states for form inputs
- Smooth transitions
- Proper mobile layout adjustments
- Scrollable recipients list
- Properly styled search button
- Custom styled select dropdown
- Warning text in red
- Proper modal overlay with background blur
To use this:
- Make sure you have a SCSS compiler set up in your project
- The styles will automatically compile to CSS
- The modal is responsive and will work well on all screen sizes
- All interactive elements (buttons, inputs) have proper hover and focus states
- The layout will adjust automatically on mobile devices with the buttons stacking vertically
The SCSS is organized with:
- Variables for easy customization
- Mixins for reusable styles
- Nested rules for better organization
- Responsive breakpoints
- BEM-like naming convention for better maintainability
212d ago