模式未正确显示

Question

Im doing some modals for a web but they don't show properly on my PC. I played with this code ( https://codepen.io/joshuaward/pen/jYZXGo ) to do it, adding the information that I would use and changing the font and all went good but when I transfered it to Sublime Text and save it, this is what looks like.

modals

JAVASCRIPT:

const buttons = document.querySelectorAll(`button[data-modal-trigger]`);

for(let button of buttons) {
    modalEvent(button);
}

function modalEvent(button) {
    button.addEventListener('click', () => {
        const trigger = button.getAttribute('data-modal-trigger');
        const modal = document.querySelector(`[data-modal=${trigger}]`);
        const contentWrapper = modal.querySelector('.content-wrapper');
        const close = modal.querySelector('.close');

        close.addEventListener('click', () => modal.classList.remove('open'));
        modal.addEventListener('click', () => modal.classList.remove('open'));
        contentWrapper.addEventListener('click', (e) => e.stopPropagation());

        modal.classList.toggle('open');
    });
}

I just added a google font (and changed font family in CSS file) + added charset utf-8 (because the information is in spanish) in the top of the original code in the HTML file.

Answer 1

Hi the problem is the code from where you are copying the stuff is using the SCSS https://codepen.io/joshuaward/pen/jYZXGo

You need to convert or compile the SCSS to CSS using this link https://www.cssportal.com/scss-to-css/

Below code is for converted CSS from SCSS and working fine.

 const buttons = document.querySelectorAll(`button[data-modal-trigger]`); for(let button of buttons) { modalEvent(button); } function modalEvent(button) { button.addEventListener('click', () => { const trigger = button.getAttribute('data-modal-trigger'); const modal = document.querySelector(`[data-modal=${trigger}]`); const contentWrapper = modal.querySelector('.content-wrapper'); const close = modal.querySelector('.close'); close.addEventListener('click', () => modal.classList.remove('open')); modal.addEventListener('click', () => modal.classList.remove('open')); contentWrapper.addEventListener('click', (e) => e.stopPropagation()); modal.classList.toggle('open'); }); } 

 *, *:before, *:after { box-sizing: border-box; outline: none; } html { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; font-smooth: auto; font-weight: 300; line-height: 1.5; color: #444; background-color: slategray; } button { cursor: pointer; } body { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .trigger { margin: 0 0.75rem; padding: 0.625rem 1.25rem; border: none; border-radius: 0.25rem; box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); font-size: 0.875rem; font-weight: 300; } .trigger i { margin-right: 0.3125rem; } .trigger:hover { box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.25), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.22); } .modal { position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 0vh; background-color: transparent; overflow: hidden; transition: background-color 0.25s ease; z-index: 9999; } .modal.open { position: fixed; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); transition: background-color 0.25s; } .modal.open > .content-wrapper { transform: scale(1); } .modal .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 50%; margin: 0; padding: 2.5rem; background-color: white; border-radius: 0.3125rem; box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5); transform: scale(0); transition: transform 0.25s; transition-delay: 0.15s; } .modal .content-wrapper .close { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; background-color: transparent; font-size: 1.5rem; transition: 0.25s linear; } .modal .content-wrapper .close:before, .modal .content-wrapper .close:after { position: absolute; content: ''; width: 1.25rem; height: 0.125rem; background-color: black; } .modal .content-wrapper .close:before { transform: rotate(-45deg); } .modal .content-wrapper .close:after { transform: rotate(45deg); } .modal .content-wrapper .close:hover { transform: rotate(360deg); } .modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after { background-color: tomato; } .modal .content-wrapper .modal-header { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 0 0 1.25rem; } .modal .content-wrapper .modal-header h2 { font-size: 1.5rem; font-weight: bold; } .modal .content-wrapper .content { position: relative; display: flex; } .modal .content-wrapper .content p { font-size: 0.875rem; line-height: 1.75; } .modal .content-wrapper .modal-footer { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 100%; margin: 0; padding: 1.875rem 0 0; } .modal .content-wrapper .modal-footer .action { position: relative; margin-left: 0.625rem; padding: 0.625rem 1.25rem; border: none; background-color: slategray; border-radius: 0.25rem; color: white; font-size: 0.87rem; font-weight: 300; overflow: hidden; z-index: 1; } .modal .content-wrapper .modal-footer .action:before { position: absolute; content: ''; top: 0; left: 0; width: 0%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transition: width 0.25s; z-index: 0; } .modal .content-wrapper .modal-footer .action:first-child { background-color: #2ecc71; } .modal .content-wrapper .modal-footer .action:last-child { background-color: #e74c3c; } .modal .content-wrapper .modal-footer .action:hover:before { width: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> <button data-modal-trigger="trigger-1" class="trigger"> <i class="fa fa-fire" aria-hidden="true"></i> Modal 1 </button> <button data-modal-trigger="trigger-2" class="trigger"> <i class="fa fa-fire" aria-hidden="true"></i> Modal 2 </button> <button data-modal-trigger="trigger-3" class="trigger"> <i class="fa fa-fire" aria-hidden="true"></i> Modal 3 </button> <div data-modal="trigger-1" class="modal"> <article class="content-wrapper"> <button class="close"></button> <header class="modal-header"> <h2>This is a modal 1</h2> </header> <div class="content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p> </div> <footer class="modal-footer"> <button class="action">Accept</button> <button class="action">Decline</button> </footer> </article> </div> <div data-modal="trigger-2" class="modal"> <article class="content-wrapper"> <button class="close"></button> <header class="modal-header"> <h2>This is a modal 2</h2> </header> <div class="content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p> </div> <footer class="modal-footer"> <button class="action">Accept</button> <button class="action">Decline</button> </footer> </article> </div> <div data-modal="trigger-3" class="modal"> <article class="content-wrapper"> <button class="close"></button> <header class="modal-header"> <h2>This is a modal 3</h2> </header> <div class="content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p> </div> <footer class="modal-footer"> <button class="action">Accept</button> <button class="action">Decline</button> </footer> </article> </div> 

Answer 2

I think you missed add CSS file link or put the SCSS code if you using only HTMl then use css not scss

I try with your code in subline it's work fine

Here i upload link in W3School enter link description here