custom modal popup bootstrap 4.3.1 css3

index.html and styles.css with a more structured layout and improved design:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Popup Example</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container text-center">
        <hr>
        <h2>Modal Example</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">LAUNCH MODAL</button>
        
        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Web Design</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal Body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-3 text-center">
                                <img src="card-image.png" alt="Card Image" class="img-fluid z-depth-1-half rounded-circle">
                                <div style="height: 10px"></div>
                                <p class="title mb-0">Soeng Souy</p>
                                <p class="text-muted" style="font-size: 13px">Web Designer</p>
                            </div>

                            <div class="col-9 text-left">
                                <p>SoengSouy.Webdesign is a free online learning platform that introduces methods and how to code websites.</p>
                                <p class="card-text">
                                    <strong>Learn how to design website templates, layouts, footers, panels, and more.</strong>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div> 
    </div>

</body>
</html>

styles.css

/* Button Styles */
.btn-primary {
    color: #fff!important;
    font-weight: 500;
    background-color: #2bbbad !important;
    border-radius: 1px;
}

.btn {
    margin: .375rem;
    color: inherit;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    border: 0;
    border-radius: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
    padding: .84rem 2.14rem;
    font-size: .81rem;
}

/* Modal Header */
.modal-dialog .modal-header {
    background-color: #fb3;
    border-radius: 1px;
    color: #fff;
    border: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: center;
}

/* Modal Content */
.modal-content {
    font-weight: 600;
    border-radius: 1px;
    box-shadow: 6px 6px 3px #ffc832b0;
}

/* Danger Button (Close Modal) */
.btn-danger {
    font-weight: 700;
}

/* Image Styling */
.z-depth-1-half {
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.18), 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.rounded-circle {
    border-radius: 50%;
}

.title {
    font-size: 16px;
    font-weight: bold;
}

.text-muted {
    font-size: 13px;
    color: #6c757d;
}

/* Other Styling */
h2 {
    margin-top: 20px;
    font-size: 2rem;
}

Key Updates:

HTML Structure: The modal structure remains the same but is now more semantically separated, with comments added for better readability.
CSS Styling:
- Buttons have specific styles with shadows and hover effects.
- The modal header is styled with a background color and box-shadow.
- The modal footer is centered with justify-content: center.
- Image is styled to ensure it has a circular shape with rounded-circle and proper shadows for a more elegant look.
- Added extra spacing and typography for the text inside the modal.
Text and Layout: The Typography has been refined for the modal content, making the text more readable, and the button looks more prominent.

Souy Soeng

custom modal popup bootstrap 4.3.1 css3

index.html

styles.css

Key Updates:

Post a Comment

Souy Soeng