Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

Kinh doanh hiệu quả hơn trên internet

MẪU WEBSITE THEO GIÁ

Tạo modal popup bằng css

Thay đổi dễ dàng theo phong cách của riêng của bạn

NULL

Mẫu web bán hàng, Mẫu web giới thiệu công ty, Mẫu web bất động sản, Mẫu web cá nhân ...

Tạo modal popup bằng css

Tác giả : Số lượt xem : 3621 lượt xem

Modal popup thường xuất hiện rất nhiều trong các trang web, để tạo hiệu ứng hiện popup này chúng ta thường dùng javascript . Sau đây mình xin giới thiệu cho các bạn cách dùng css để tạo nó mà không cần sử dụng bất kì đoạn script nào.

Link DEMO : Bấm vào đây

Trước hết ta có HTML sau:

<div class="wrapper">
	<input name="modal" type="checkbox" id="modal">
	<label for="modal" class="label-show-modal">Click Modal</label>
	<div class="modal-show">
		<div class="modal-show-inner">
			<label for="modal">&#10006;</label>
			<h2>Show Modal Content</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
		</div>
	</div>
</div>

<label for="modal" class="label-show-modal">Click Modal</label>

<h2>Show Modal Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>

</div>

Ở html trên ta có :

input – type[checkbox]

label for=”modal” – for label giống id của input để kết nối vs nhau.

Và đây là đoạn css tạo popup mà bạn không phải dùng bất kỳ đoạn script nào :

body{
	margin: 0;
}
.wrapper{
	background: #293a4a;
	width: 100%;
	height: 100%;
	position: fixed;
}

input{
	visibility: hidden;
}
.label-show-modal{
	background: #09b060;
	border-radius: 0;
  	color: #fff;
  	cursor: pointer;
  	display: inline-block;
  	padding: 10px 15px;
  	font-weight: bold;
  	margin: 20px;
}
.modal-show {
  	background: rgba(0,0,0,0.7);
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	position: fixed;
  	text-align: center;
  	opacity: 0;
  	transform: scale(0);
  	visibility: hidden;
  	transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.modal-show-inner {
  	position: relative;
    margin: 100px auto 20px;
    max-width: 500px;
    width: 80%;
    color: #fff;
    background: #09b060;
    padding: 10px;
}
.modal-show-inner label{
	position: absolute;
	width: 25px;
	height: 25px;
	background: #fff;
	color: #000;
	text-align: center;
	border-radius: 450%;
	line-height: 25px;
	top: -12.5px;
	right: -12.5px;
	cursor: pointer;
}
input:checked ~ .modal-show {
  	opacity: 1;
  	transform: scale(1);
  	visibility: visible;
  	transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

body{

margin: 0;

}

.wrapper{

background: #293a4a;

width: 100%;

height: 100%;

position: fixed;

}

input{

visibility: hidden;

}

.label-show-modal{

background: #09b060;

border-radius: 0;

color: #fff;

cursor: pointer;

display: inline-block;

padding: 10px 15px;

font-weight: bold;

margin: 20px;

}

.modal-show {

background: rgba(0,0,0,0.7);

top: 0;

left: 0;

right: 0;

bottom: 0;

position: fixed;

text-align: center;

opacity: 0;

transform: scale(0);

visibility: hidden;

transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);

}

.modal-show-inner {

position: relative;

margin: 100px auto 20px;

max-width: 500px;

width: 80%;

color: #fff;

background: #09b060;

padding: 10px;

}

.modal-show-inner label{

position: absolute;

width: 25px;

height: 25px;

background: #fff;

color: #000;

text-align: center;

border-radius: 450%;

line-height: 25px;

top: -12.5px;

right: -12.5px;

cursor: pointer;

}

input:checked ~ .modal-show {

opacity: 1;

transform: scale(1);

visibility: visible;

transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);

}

Thế là song, rất đơn giản phải không. Bạn có thể áp dụng bài viết trên để làm modal popup cho trang web của mình. Bài viết giúp các bạn đang học css có kinh nghiệm thêm về cách sử dụng của nó.

Hy vọng các bạn sẽ thấy thích bài viết của mình chia sẻ cho các bạn, nếu có bất kỳ vấn đề khó khăn gì hay câu hỏi gì . Bạn đừng ngần ngại , hãy để lại bình luận ở dưới nhé.

Chúc Các Bạn Thành Công !

Hỗ trợ trực tuyến

Hỗ trợ khách hàng
0941 254 937 Gia Khang
Email chăm sóc khách hàng
support@thietkewebsite500k.net

Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau

Tạo modal popup bằng css

Tạo modal popup bằng css

Hỗ trợ trực tuyến

Hỗ trợ trực tuyến

⭐ Chia sẻ 10 công cụ kiểm tra Backlink đối thủ tốt nhất

⭐ THIẾT KẾ TABLE ĐẸP MẮT BẰNG CSS (Tiếp)

⭐ Domain – Tên miền là gì ? Định nghĩa ý nghĩa của domain ?

⭐ Thiết kế table đẹp mắt bằng CSS

⭐ Tạo modal popup bằng css

DỊCH VỤ THIẾT KẾ WEBSITE GIÁ RẺ

Liên hệ

Thiết Kế Website

Liên Kết

Đăng Ký Dịch Vụ

Xin Vui Lòng Điền Đầy Đủ Thông Tin