模式无法正确显示

时间：2019-09-04 06:11:10

标签： javascript html css

我正在为Web做一些模式，但是它们在我的PC上无法正确显示。我使用此代码（https://codepen.io/joshuaward/pen/jYZXGo）进行操作，添加了我将要使用的信息并更改了字体，但一切都很好，但是当我将其传输到Sublime Text并保存时，情况就是这样。

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');
    });
}

我刚刚在HTML文件的原始代码顶部添加了Google字体（并在CSS文件中更改了字体系列）+添加了字符集utf-8（因为信息是西班牙语）。

2 个答案:

答案 0 :(得分：0)

您好，问题是您使用 SCSS 复制内容的代码 https://codepen.io/joshuaward/pen/jYZXGo

您需要将SCSS转换或编译为CSS 使用此链接https://www.cssportal.com/scss-to-css/

以下代码用于从SCSS转换后的CSS，并且工作正常。

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>

答案 1 :(得分：0)

如果您仅使用HTMl，然后使用css而不是scss，我想您错过了添加CSS文件链接或放置SCSS代码

我尝试将您的代码放在子行中

我在W3School中上传链接enter link description here

相关问题
最新问题