สอบถามเกี่ยวกับวิธีการทำ popup โฆษณาในหน้าเว็ปหน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับวิธีการทำ popup โฆษณาในหน้าเว็ปหน่อยครับ

สอบถามเกี่ยวกับวิธีการทำ popup โฆษณาในหน้าเว็ปหน่อยครับ

ผมอยากจะทำ popup เกี่ยวกับตัวโฆษณา คือเมื่อ user เข้ามายังหน้าเว็ปเเล้ว ประมาณ 5 วิ ก็ให้มีการขึ้น popup โฆษณาเเจ้งเตือน มันสามารถทำได้อย่างไรบ้างครับ รบกวนขอตัวอย่างในการศึกษาหน่อยครับ

Antinew007 06-08-2020 10:54:45

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

สร้าง div สำหรับใส่โฆษณาหรือ banner กำหนดชื่อ css class ตามค้องการ เนื้อหาด้านใน

แทรกได้ตามต้องการ

<div class="ads-popup">เนื้อหาด้านในแทรกตามต้องการ</div>

กำหนด css จัดรูปแบบกรแสดง ตำแหน่ง ขนาด ตามต้องการ สมมติ จัดไว้ตรงกลาง ของหน้าเพจ

โดยฟิกความกว้างความสูงของ โฆษณา

.ads-popup {
    position: fixed;
    width: 500px;
    height: 200px;
    background-color: yellow;
    z-index: 1000;
    left: calc(50vw - 250px);
    top: calc(50vh - 100px);
}

ใช้วิธีการคำนวณเพื่อจัดกึ่งกลาง ถ้าเป็นค่าฟิก ก็เอาค่าครึ่งหนึ่งมาลบออก ระวังเรื่องช่องว่างระหว่างเครื่องหมาย

ทางคณิตศาสตร์ ต้องมีเว้นวรรค

หรือกรณีใช้เป็น % ก็ใช้ครึ่งหนึ่งมาลบออกเหมือนกัน

.ads-popup {
    position: fixed;
    width: 50%;
    height: 40%;
    background-color: yellow;
    z-index: 1000;
    left: calc(50vw - 25%);
    top: calc(50vh - 20%);
}

ทดสอบ โดยแทรก html และ css ข้างต้น ในหน้าเพจที่จะแสดง ปรับแต่งจัดรูปแบบตามต้องการ

เสร็จแล้วก็ ต้องซ่อน ก่อน แล้วค่อย ให้แสดงด้วย JavaScript โดยซ่อนด้วยการเพิ่ม display:none เข้าไปใน

css class แล้วกำหนดการใช้งาน JavaScript ให้แสดงเมื่อถึงเวลาที่กำหนด

setTimeout(function(){
    var adsPopup = document.querySelector(".ads-popup");
    adsPopup.style.display = 'block';
    adsPopup.addEventListener("click", function(){
        adsPopup.style.display = 'none';
    });
},5000);

ดูตัวอย่างโค้ดด้านล่างเป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
.ads-popup-red {
    position: fixed;
    width: 500px;
    height: 200px;
    background-color: red;
    z-index: 1001;
    left: calc(50vw - 250px);
    top: calc(50vh - 100px);
    display:none;
}  
.ads-popup-yellow {
    position: fixed;
    width: 50%;
    height: 40%;
    background-color: yellow;
    z-index: 1000;
    left: calc(50vw - 25%);
    top: calc(50vh - 20%);
    display:none;
}
</style>
</head>
<body>
<div class="ads-popup-red">เนื้อหาด้านในแทรกตามต้องการ</div>
<div class="ads-popup-yellow">เนื้อหาด้านในแทรกตามต้องการ</div>

<script>
setTimeout(function(){
    var adsPopupR = document.querySelector(".ads-popup-red");
    adsPopupR.style.display = 'block';
    adsPopupR.addEventListener("click", function(){
        adsPopupR.style.display = 'none';
    });
},5000);  
setTimeout(function(){
    var adsPopupY = document.querySelector(".ads-popup-yellow");
    adsPopupY.style.display = 'block';
    adsPopupY.addEventListener("click", function(){
        adsPopupY.style.display = 'none';
    });
},5000);    
</script>  
  
</body>
</html>

ตัวอย่าง DEMO

ninenik 06-08-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน