|
 |
| |
พอจะมีตัวอย่างการทำป๊อปอัพกดติดตามข่าวสารในเว็บบ้างมั๊ยคะ |
| |
 |
|
|
 |
 |
|
ปีอบอัพแบบที่เด้งขึ้นมาถามว่า ต้องการรับข่าวสารหรือไม่ แล้วถ้าเรากด รับ
เวลามีการอัพเดตข่าวในเว็บ ก็จะขึ้นแจ้งเตือนที่หน้าจออ่ะค่ะ
|
 |
 |
 |
 |
| Date :
2019-01-22 09:32:57 |
By :
tidaangle |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
แบบที่ 1
Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Auto Loading Bootstrap Modal on Page Load</title>
<!-- script modal popup -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- css -->
<style type="text/css">
/*modal css*/
/* fade ออกมาตรงกลางหน้าจอ
.fade {
opacity: 0;
-webkit-transition: opacity 1s linear;
transition: opacity 1s linear;
}
*/
/* fade left ออกมาจากทางซ้ายของหน้าจอ */
.modal.fade:not(.in) .modal-dialog {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
</style>
<script type="text/javascript">
/*
//onload show modal script ชุดนี้โหลดมาตรงๆ ไม่มีหน่วงเวลานะ
$(document).ready(function(){
$("#myModal").modal('show');
});
*/
//เรีกยก modal ออกมาแสดง
var show = function(){
$('#myModal').modal('show');
};
/* กำหนดเวลาหลังเปิดหน้าเว็บ ว่าจะให้แสดงหลังโหลดหน้าเว็บแล้วกี่วินาที เช่น 2000 = 2 วิ */
$(window).load(function(){
var timer = window.setTimeout(show,2000);
});
</script>
</head>
<body>
<!-- title -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 align="center"> devbanban.com </h2>
</div>
</div>
</div>
<!-- modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-sm"> <!-- กำหนดขนาดของ modal เพิ่มได้นะครับ เช่น xs, sm, md, lg -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"> devbanban.com </h4>
</div>
<div class="modal-body">
<p>ข้อความ..... </p>
เนื้อหา, รุปภาพ ฯลฯ
หรือเอาไปประยุกต์ใช้กับอะไรก็ได้ครับ
<br>
</div>
</div>
</div>
</div>
<!-- devbanban.com -->
</body>
</html>
แบบที่ 2
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ตัวอย่าง popup </title>
<!-- สามารถไปดาวน์โหลดมาไว้ใน server ได้เลย -->
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<!-- นับเวลาถอยหลัง -->
<h1><span id="seconds">2</span></h1>
<!--จะโหลดมาไว้ใน server หรือใช้แบบนี้ก็ได้ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
//กำหนดขนาดและหน้าเว็บที่จะแสดงใน popup สามารถใส่เป็นภาพก็ได้นะครับ
$.colorbox({iframe:true, width:"800px", height:"500px", href: "http://devbanban.com/"});
}
function countDown(){
seconds--
$("#seconds").text(seconds);
if (seconds === 0){
openColorBox();
clearInterval(i);
}
}
//กำหนดเวลา วินาทีที่จะให้ popup ทำงาน
var seconds = 2,
i = setInterval(countDown, 1000);
</script>
</body>
</html>
ส่วนเงื่อนไขที่บอกว่า
เวลาเขากดรับข่าวสารในเว็บ
อาจจะมีการเก็บลงฐานข้อมูลครับเช่น
ถ้าหากเป็นแบบสมาชิก เมื่อสมาชิกกดรับข้อมูล เราก็เก็บลงฐานข้อมูลไปซ่ะว่าสมาชิกคนนี้ได้กดรับข้อมูล
แต่ถ้าสมาชิกไม่กดรับข้อมูล เราก็อาจจะเก็บว่าสมาชิกไม่สมัครรับข้อมูล
แล้วก็ค่อยเอามาเข้าเงื่อนไข เช่น
Code (PHP)
$sssss_01001 = '1';
if($sssss_01001 == 'true'){
//แสดงป๊อบอัพข่าวใหม่เมื่อผู้ใช้เข้าสู่ระบบ(คนที่กดรับก็จะแสดงข่าวใหม่ไป)
}else{
//ไม่ต้องแสดง ป็อบอัพข่าวใหม่ เมื่อผู้ใช้เข้าสู่ระบบ(คนที่ไม่กดรับ ก็ไม่ต้องแสดงข่าวให้เขา)
}
ปล.ผมว่าคงอยากได้แบบ youtube  ที่ผมบอกไปเป็นแค่แนวคิดเฉย ๆนะครับ รอพี่ๆ เขามาตอบเพิ่ม
|
| |
|
|
| |
| Date :
2019-01-22 11:32:05 |
By :
nobetaking |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณนะคะ เดี๋ยวจะลองไปทำดูก่อน
|
| |
|
|
| |
| Date :
2019-01-22 13:23:25 |
By :
tidaangle |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
