Cửa sổ bật lên javascript

# Css Popup thông báo

.toast-container {
  position: fixed;
  bottom: -140px;
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: 0 16px;
  border-radius: 24px;
  box-shadow: 0 8px 20px -4px rgba[0, 0, 0, 0.2];
  left: 50%;
  transform: translateX[-50%];
  transition: all 1800ms ease;
}

.toast-container.active {
  bottom: 20px;
}

.toast-container h3 {
  font-weight: 800;
  line-height: 1.5;
  font-size: 16px;
}

.toast-container .text-content {
  padding: 0 24px;
  padding-right: 40px;
}

.toast-container p.author-name {
  color: #aaa;
  font-size: 14px;
}

.toast-container a {
  color: #5f64f3;
}

.toast-container .close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

# Javascript Popup thông báo

const toastContainer = document.querySelector[".toast-container"];
const closeBtn = document.querySelector[".toast-container .close"];
const toastLink = document.querySelector[".toast-container a"];

if [!localStorage.getItem["displayToast"]] {
  setTimeout[[] => {
    toastContainer.classList.add["active"];
  }, 1000];
}

const stopDisplayingToast = [] => {
  localStorage.setItem["displayToast", false];
  toastContainer.classList.remove["active"];
};

closeBtn.addEventListener["click", stopDisplayingToast];
toastLink.addEventListener["click", stopDisplayingToast];

# Icon Popup thông báo

Các bạn tải mấy cái icon ảnh này về và thay link vào trong code nhé. BIỂU TƯỢNG HÌNH ẢNH

Kết luận

Việc tạo Popup thông báo cho WordPress có rất nhiều Plugin có thể dễ dàng tạo được những Popup rất đẹp. Tuy nhiên bạn thích đọc nó thì bạn có thể thử với cách tạo Popup thông báo bằng html css cho WordPress mà Blog thủ thuật máy tính f4vnn chia sẻ nhé. Chúc bạn thành công

windowFeatures Một chuỗi xác định các tính năng khác nhau của cửa sổ sẽ được đưa vào cửa sổ bật lên [như thanh trạng thái, thanh địa chỉ, v.v.] Đoạn mã sau sẽ mở một cửa sổ trình duyệt mới với các tính năng tiêu chuẩn

window.open ["//jsc.simfatic-solutions.com","mywindow"]; 

Thay đổi các tính năng của Popup

Bạn có thể kiểm soát các tính năng của cửa sổ bật lên bằng đối số cuối cùng của cửa sổ. phương pháp mở. Đoạn mã sau mở một cửa sổ có thanh trạng thái và không có tính năng bổ sung nào

window.open ["//jsc.simfatic-solutions.com","mywindow","status=1"];

Đoạn mã dưới đây mở một cửa sổ với thanh công cụ và thanh trạng thái

window.open ["//jsc.simfatic-solutions.com", "mywindow","status=1,toolbar=1"];

Bảng hiển thị các tính năng và mã thông báo chuỗi bạn có thể sử dụng

tình trạng

Thanh trạng thái ở cuối cửa sổ

thanh công cụ

Thanh công cụ tiêu chuẩn của trình duyệt, với các nút như Quay lại và Chuyển tiếp

vị trí

Trường mục nhập Vị trí nơi bạn nhập URL

thanh menu

Thanh menu của cửa sổ

thư mục

Các nút thư mục tiêu chuẩn của trình duyệt, chẳng hạn như What's New và What's Cool

thay đổi kích thước

Cho phép/Không cho phép người dùng thay đổi kích thước cửa sổ

thanh cuộn

Bật thanh cuộn nếu tài liệu lớn hơn cửa sổ

chiều cao

Chỉ định chiều cao của cửa sổ tính bằng pixel. [thí dụ. chiều cao='350']

bề rộng

Chỉ định chiều rộng của cửa sổ bằng pixel

ví dụ

Đoạn mã sau mở một cửa sổ với thanh menu. Cửa sổ có thể thay đổi kích thước và có chiều rộng 350 pixel và chiều cao 250 pixel

window.open ["//jsc.simfatic-solutions.com","mywindow","menubar=1,resizable=1,width=350,height=250"];

ví dụ 1

Một cửa sổ có thanh vị trí, thanh trạng thái, thanh cuộn và có kích thước 100 X 100

window.open ["//jsc.simfatic-solutions.com", "mywindow","location=1,status=1,scrollbars=1, width=100,height=100"];

ví dụ 2

Di chuyển cửa sổ đến vị trí mong muốn

Bạn có thể sử dụng cửa sổ. Chức năng moveTo để di chuyển cửa sổ bật lên đến vị trí mong muốn. Mã bên dưới hiển thị định vị cửa sổ bật lên ở vị trí mong muốn

________số 8

Mã định vị cửa sổ bật lên ở góc trên cùng bên trái của màn hình

Để tất cả chúng cùng nhau

Bây giờ chúng tôi sẽ kết hợp tất cả các thông tin này để tạo các cửa sổ bật lên thuộc các loại khác nhau. Mã bên dưới sẽ mở một cửa sổ bật lên khi bạn vào trang

 JavaScript Popup Example 3


function poponload[]
{
    testwindow = window.open["", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100"];
    testwindow.moveTo[0, 0];
}


JavaScript Popup Example 3

Lưu ý rằng URL được giữ trống. Điều này sẽ mở ra một cửa sổ trống. Bạn có thể xem mã đang hoạt động trong tệp này. Ví dụ về cửa sổ bật lên JavaScript 3