The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Modal Flex
kwd53
post Aug 11 2023, 03:53 AM
Post #1





Group: Members
Posts: 1
Joined: 11-August 23
Member No.: 29,015
I cannot seem to flex my items into my display to the right of my button area is there anyone who can make this work


CODE
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Modal Layout</title>
        <link rel="stylesheet" href="styles.css">
        <style>
            body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            }
            .modal {
            width: 12in;
            height: 6.5in;
            background-color: #ffffff;
            border: 1px solid #c0c0c0;
            overflow: hidden;
            resize: both;
            display: flex;
            flex-direction: column;
            position: fixed;  /* Makes the modal appear above other content */
            top: 50%;        /* Centers the modal vertically */
            left: 50%;       /* Centers the modal horizontally */
            transform: translate(-50%, -50%); /* Ensures precise centering */
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); /* Optional: adds a shadow for a pop-out effect */
            z-index: 1000;   /* Makes sure the modal appears above other content */
            }
            .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #d0d0d0;
            border-bottom: 1px solid #c0c0c0;
            }
            .modal-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            }
            .top-nav {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #e0e0e0;
            border-bottom: 1px solid #c0c0c0;
            }
            .content-area {
            flex: 1;
            display: flex;
            }
            .left-panel {
            width: 20%;
            background-color: #e8e8e8;
            border-right: 1px solid #c0c0c0;
            display: flex;
            flex-direction: column;
            padding: 10px;
            gap: 10px;
            }
            .display-area {
            flex: 1;
            background-color: #f8f8f8;
            padding: 10px;
            }
            .close-btn {
            background-color: #b0b0b0;
            border: none;
            cursor: pointer;
            padding: 5px 10px;
            }
            button {
            cursor: pointer;
            }
            .collapse-content {
            display: none;
            padding-left: 15px; /* Indent content for better visual representation */
            /* Additional styling if needed */
            }  
            .detail-content {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            }
            .item {
            width: 150px;
            margin: 10px;
            text-align: center;
            border: 1px solid #000; /* Border around each div section */
            position: relative; /* To position the modal correctly */
            }
            .item img {
            margin: 10px;
            max-width: 100%; /* Make sure images fit into the item container */
            display: block;
            margin: 0 auto;
            }
            .item-detail {
            margin-top: 10px;
            }
            .info-btn {
            background-color: #0099cc;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            }
            #expansions {
            display: none;
            }
            .modal-bottom-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;                
            background-color: #ddd;     /* Slightly different shade to stand out */
            padding: 12px;
            text-align: center;         /* Center the text */
            border-top: 1px solid #aaa; /* A simple border */
            cursor: move;
            }          
        </style>
    </head>
    <body>
        <div class="modal">
            <div class="modal-header">
                <span>Account Data</span>
                <button class="close-btn">x</button>
            </div>
            <div class="modal-body">
                <div class="top-nav">
                    <select>
                        <option>Account Lookup</option>
                    </select>
                    <input type="text" placeholder="Account Name">
                    <select>
                        <option>Free to Play</option>
                        <option>Premium</option>
                        <option>VIP</option>
                    </select>
                    <button>Create Account</button>
                </div>
                <div class="content-area">
                    <div class="left-panel">
                        <!-- Add account headings here -->
                        <button data-content="expansions">Expansions</button>
                        <div id="expansions" class="collapse-content" style="display:none;">
                            <button data-detail="menace-content">Menace of the Underdark</button>
                            <button data-detail="shadowfell-content">Shadowfell Conspiracy</button>
                            <button data-detail="ravenloft-content">Mists of Ravenloft</button>
                            <button data-detail="sharn-content">Masterminds of Sharn</button>
                            <button data-detail="feywild-content">Fables of the Feywild</button>
                            <button data-detail="saltmarsh-content">Sinister Secret of Saltmarsh</button>
                            <button data-detail="dread-content">The Isle of Dread</button>
                            <button data-detail="vecna-content">Vecna Unleashed</button>                                                                                    
                        </div>
                        <button data-target="characterSlots-content">Character Slots</button>
                        <button data-target="characterSlots-content">Shared Bank Slots</button>
                        <button data-target="characterSlots-content">Crafting Storage</button>
                        <button data-target="characterSlots-content">Races</button>
                        <button data-target="characterSlots-content">Iconic Races</button>
                        <button data-target="characterSlots-content">Classes</button>
                        <button data-target="characterSlots-content">Archetypes</button>
                        <button data-target="characterSlots-content">Monster Manuals</button>
                        <button data-target="characterSlots-content">Enchancement Trees</button>
                        <button data-target="characterSlots-content">Account Upgrades</button>
                        <button data-target="characterSlots-content">Platinum Vault</button>
                        <button data-target="characterSlots-content">Adventure Packs</button>
                    </div>
                    <div class="display-area">
                        <div id="menace-content" class="detail-content" style="display:none;"> ,!--******************** this section is not flexing my items horizontally and wrapping them *********************-->
                            <div class="item">
                                <!-- Menace of the Underdark Store Points -->
                                <img src="https://drive.google.com/uc?export=view&id=1znaOXzIxmJMroEupYzgU9KsPiJwNQPTK" alt="Menace of the Underdark Image">
                                <button class="select-btn">Select</button>
                                <button class="info-btn" data-modal="motu-sp">Info</button>
                                <div class="item-detail">DDO Store Points</div>
                                <!-- Modal structure for expansion 1 -->
                                <div id="motu-sp" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <span class="close-btn">&times;</span>
                                        Menace of the Underdark DDO Store Points
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <!-- Menace of the Underdark Expansion Trove -->
                                <img src="https://drive.google.com/uc?export=view&id=1znaOXzIxmJMroEupYzgU9KsPiJwNQPTK" alt="Menace of the Underdark Image">
                                <button class="select-btn">Select</button>
                                <button class="info-btn" data-modal="motu-et">Info</button>
                                <div class="item-detail">Expansion Trove</div>
                                <!-- Modal structure for expansion 1 -->
                                <div id="motu-et" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <span class="close-btn">&times;</span>
                                        Menace of the Underdark Expansion Trove
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <!-- Menace of the Underdark Base Edition-->
                                <img src="https://drive.google.com/uc?export=view&id=1znaOXzIxmJMroEupYzgU9KsPiJwNQPTK" alt="Menace of the Underdark Image">
                                <button class="select-btn">Select</button>
                                <button class="info-btn" data-modal="motu-be">Info</button>
                                <div class="item-detail">DDO Store Points</div>
                                <!-- Modal structure for expansion 1 -->
                                <div id="motu-be" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <span class="close-btn">&times;</span>
                                        Menace of the Underdark DDO Base Edition
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <!-- Menace of the Underdark Standard Edtion -->
                                <img src="https://drive.google.com/uc?export=view&id=1znaOXzIxmJMroEupYzgU9KsPiJwNQPTK" alt="Menace of the Underdark Image">
                                <button class="select-btn">Select</button>
                                <button class="info-btn" data-modal="motu-se">Info</button>
                                <div class="item-detail">Expansion Trove</div>
                                <!-- Modal structure for expansion 1 -->
                                <div id="motu-se" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <span class="close-btn">&times;</span>
                                        Menace of the Underdark Standard Edition
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <!-- Menace of the Underdark Collector's Edition -->
                                <img src="https://drive.google.com/uc?export=view&id=1znaOXzIxmJMroEupYzgU9KsPiJwNQPTK" alt="Menace of the Underdark Image">
                                <button class="select-btn">Select</button>
                                <button class="info-btn" data-modal="motu-ce">Info</button>
                                <div class="item-detail">Expansion Trove</div>
                                <!-- Modal structure for expansion 1 -->
                                <div id="motu-ce" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <span class="close-btn">&times;</span>
                                        Menace of the Underdark Collector's Edition
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ... repeat for other categories ... -->
                </div>
                <div class="modal-bottom-bar">
                    <button>Submit</button>  
                    Drag from here
                </div>
            </div>
        </div>
        </div>
        <script>

document.addEventListener('DOMContentLoaded', function() {

    // Handle the "Expansions" button to toggle the list of individual expansions
    const expansionsBtn = document.querySelector('[data-content="expansions"]');
    const expansionsContent = document.getElementById('expansions');
    if (expansionsBtn && expansionsContent) {
        expansionsBtn.addEventListener('click', function() {
            if (expansionsContent.style.display === 'none' || !expansionsContent.style.display) {
                expansionsContent.style.display = 'block';
            } else {
                expansionsContent.style.display = 'none';
            }
        });
    }

    // Handle the individual expansion buttons to show the appropriate content in the display area
    const expansionDetailBtns = document.querySelectorAll('.collapse-content > button');
    expansionDetailBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const allDetailContents = document.querySelectorAll('.detail-content');
            allDetailContents.forEach(function(content) {
                content.style.display = 'none';
            });
            const detailId = btn.getAttribute('data-detail');
            const detailContent = document.getElementById(detailId);
            if (detailContent) {
                detailContent.style.display = 'block';
            }
        });
    });

    // Handle single left hand button for character slots
    const characterSlotButton = document.querySelector('button[data-target="characterSlots-content"]');
    const detailContents = document.querySelectorAll('.detail-content');
    if (characterSlotButton) {
        characterSlotButton.addEventListener('click', function() {
            detailContents.forEach(content => {
                content.style.display = 'none';
            });
            const targetDetail = document.getElementById(characterSlotButton.getAttribute('data-target'));
            if (targetDetail) {
                targetDetail.style.display = 'block';
            }
        });
    }

    // Handle info and close buttons for all modals (removes redundancy)
    const infoBtns = document.querySelectorAll('.info-btn');
    infoBtns.forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            const modalID = btn.getAttribute('data-modal');
            const modalElem = document.getElementById(modalID);
            if (modalElem) {
                modalElem.style.display = 'block';
            }
            e.stopPropagation(); // To ensure that no other events are triggered
        });
    });

    const closeBtns = document.querySelectorAll('.close-btn');
    closeBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const modalElem = btn.closest('.modal');
            if (modalElem) {
                modalElem.style.display = 'none';
            }
        });
    });

});
            /* Drag Modal */          
        </script>
    </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 11:44 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC