ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comความรู้ทั่วไปGeneral (ถามคุยวิชาการ IM)หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ  (อ่าน 1650 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
surasak991111
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 454



ดูรายละเอียด
« เมื่อ: 04 สิงหาคม 2019, 14:37:35 »

อยากทำบ้างครับ

« แก้ไขครั้งสุดท้าย: 04 สิงหาคม 2019, 14:55:22 โดย surasak991111 » บันทึกการเข้า

nut_anek
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 149
ออฟไลน์ ออฟไลน์

กระทู้: 980



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 04 สิงหาคม 2019, 15:03:54 »

CSS เลยครับ ถ้าไม่ใช่ Popup ก็เป็นแค่ div ธรรมดาที่ใส่ box-shadow ให้มีเงา และพื้นหลังเว็บก็ใส่สีเท่าเอาท่อนบน

หรืออีกวิธี ใช้ position: absolute กับ div ที่ซ้อนอยู่ก็ได้ครับ
บันทึกการเข้า

IR888
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 18



ดูรายละเอียด
« ตอบ #2 เมื่อ: 04 สิงหาคม 2019, 15:07:42 »

ติดตามด้วยคนครับ  wanwan003
บันทึกการเข้า
surasak991111
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 454



ดูรายละเอียด
« ตอบ #3 เมื่อ: 04 สิงหาคม 2019, 16:35:34 »

CSS เลยครับ ถ้าไม่ใช่ Popup ก็เป็นแค่ div ธรรมดาที่ใส่ box-shadow ให้มีเงา และพื้นหลังเว็บก็ใส่สีเท่าเอาท่อนบน

หรืออีกวิธี ใช้ position: absolute กับ div ที่ซ้อนอยู่ก็ได้ครับ

ขอโค๊ดหน่อยได้ไหมครับท่าน  wanwan011
บันทึกการเข้า

ThaNaButS
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 67
ออฟไลน์ ออฟไลน์

กระทู้: 1,197



ดูรายละเอียด
« ตอบ #4 เมื่อ: 04 สิงหาคม 2019, 16:39:54 »

ถ้าใช้ Bootstrap ลองดูเรื่อง Modal ครับ ปรับขนาด เอาปุ่มปิดออกใกล้เคียง

https://getbootstrap.com/docs/4.0/components/modal/
https://mdbootstrap.com/docs/jquery/modals/basic/

แต่ถ้าแบบปรับเองใช้ style แบบคุณ nut_anek บอกครับ อาจจะใส่ z-index ให้มันลอยอยู่หน้าสุด
« แก้ไขครั้งสุดท้าย: 04 สิงหาคม 2019, 16:40:57 โดย ThaNaButS » บันทึกการเข้า
Jaych
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 250



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 04 สิงหาคม 2019, 17:22:32 »

รอดูด้วยคน
บันทึกการเข้า
TITIO
คนรักเสียว
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 149



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 04 สิงหาคม 2019, 17:38:37 »

รอดูครับผม  wanwan017
บันทึกการเข้า
wookky
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 46
ออฟไลน์ ออฟไลน์

กระทู้: 1,356



ดูรายละเอียด
« ตอบ #7 เมื่อ: 04 สิงหาคม 2019, 21:28:57 »

ประมาณนี้ wanwan013
http://jsfiddle.net/chrissp26/8ygva6hm/
บันทึกการเข้า

pchok
Newbie
*

พลังน้ำใจ: 5
ออฟไลน์ ออฟไลน์

กระทู้: 43



ดูรายละเอียด
« ตอบ #8 เมื่อ: 04 สิงหาคม 2019, 23:28:43 »

style
โค๊ด:
 body {
  margin-top: 100px;
  text-align: center;
  font-family: monaco, monospace;
  background: #fff;
}
.wrap {
  background: #ccc;
  width: 90%;
  height: 300px;
  margin: 0 auto 0 auto;
  overflow: visible;
}
.content {
  background: #fff;
  position: relative;
  width: 70%;
  top: -40px;
  height: 280px;
  margin: 0 auto 0 auto;
  padding: 20px;
  box-shadow: 0px 5px 20px #999;
}
html
โค๊ด:
<body>
<div class="wrap">
  <div class="content">
    <h1>This is</h1>
    <h2>(thaiSEOboard.com)</h2>
  </div>
</div>
</body>

ตัวอย่าง
โค๊ด:
https://jsfiddle.net/76dqjLf0/1/
« แก้ไขครั้งสุดท้าย: 04 สิงหาคม 2019, 23:31:41 โดย pchok » บันทึกการเข้า

สวัสดีวัน พฤ Smiley
maridb204
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 228



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 05 สิงหาคม 2019, 15:10:56 »

bootstrap modal >> https://getbootstrap.com/docs/4.0/components/modal/
บันทึกการเข้า

surasak991111
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 454



ดูรายละเอียด
« ตอบ #10 เมื่อ: 06 สิงหาคม 2019, 19:05:42 »

ขอโทดนะครับ ไม่ทราบว่าใส่ตรงไหนครับ พอดีผมอยากให้ให้มันขึ้นเฉพาะบทความนั้นๆ เช่น หน้าเว็บเราปกติ แต่หากคลิกลิงค์ที่โยงไปบทความนั้น แล้วมันเด้งขึ้น ตามตัวอย่างนะครับ ผมเอาโค๊ดไปใส่ในบทความนั้น มันไม่ขึ้นครับ ขอความกรุณาด้วยครับ ขอบคุณครับชาว thaiseoboard  wanwan011
บันทึกการเข้า

wachirawit
คนรักเสียว
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 101



ดูรายละเอียด
« ตอบ #11 เมื่อ: 08 สิงหาคม 2019, 22:15:22 »

+1 ตามครับผม wanwan003
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์