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

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

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


Antinew007 06-08-2020 10:54:45

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 1
สร้าง div สำหรับใส่โฆษณาหรือ banner กำหนดชื่อ css class ตามค้องการ เนื้อหาด้านใน
แทรกได้ตามต้องการ
 
1
<div class="ads-popup">เนื้อหาด้านในแทรกตามต้องการ</div>
 
กำหนด css จัดรูปแบบกรแสดง ตำแหน่ง ขนาด ตามต้องการ สมมติ จัดไว้ตรงกลาง ของหน้าเพจ
โดยฟิกความกว้างความสูงของ โฆษณา
 
1
2
3
4
5
6
7
8
9
.ads-popup {
    position: fixed;
    width: 500px;
    height: 200px;
    background-color: yellow;
    z-index: 1000;
    left: calc(50vw - 250px);
    top: calc(50vh - 100px);
}
 
ใช้วิธีการคำนวณเพื่อจัดกึ่งกลาง ถ้าเป็นค่าฟิก ก็เอาค่าครึ่งหนึ่งมาลบออก ระวังเรื่องช่องว่างระหว่างเครื่องหมาย
ทางคณิตศาสตร์ ต้องมีเว้นวรรค
    หรือกรณีใช้เป็น % ก็ใช้ครึ่งหนึ่งมาลบออกเหมือนกัน
 
1
2
3
4
5
6
7
8
9
.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 ให้แสดงเมื่อถึงเวลาที่กำหนด
 
1
2
3
4
5
6
7
setTimeout(function(){
    var adsPopup = document.querySelector(".ads-popup");
    adsPopup.style.display = 'block';
    adsPopup.addEventListener("click", function(){
        adsPopup.style.display = 'none';
    });
},5000);
 
    ดูตัวอย่างโค้ดด้านล่างเป็นแนวทาง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ