ThaiSEOBoard.com

ความรู้ทั่วไป => General (ถามคุยวิชาการ IM) => ข้อความที่เริ่มโดย: surasak991111 ที่ 04 สิงหาคม 2019, 14:37:35


หัวข้อ: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: surasak991111 ที่ 04 สิงหาคม 2019, 14:37:35
อยากทำบ้างครับ

(https://sv1.picz.in.th/images/2019/08/04/KJ5uwl.jpg)

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: nut_anek ที่ 04 สิงหาคม 2019, 15:03:54
CSS เลยครับ ถ้าไม่ใช่ Popup ก็เป็นแค่ div ธรรมดาที่ใส่ box-shadow ให้มีเงา และพื้นหลังเว็บก็ใส่สีเท่าเอาท่อนบน

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

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: IR888 ที่ 04 สิงหาคม 2019, 15:07:42
ติดตามด้วยคนครับ  :wanwan003:

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: surasak991111 ที่ 04 สิงหาคม 2019, 16:35:34
อ้างจาก: nut_anek ที่ 04 สิงหาคม 2019, 15:03:54
CSS เลยครับ ถ้าไม่ใช่ Popup ก็เป็นแค่ div ธรรมดาที่ใส่ box-shadow ให้มีเงา และพื้นหลังเว็บก็ใส่สีเท่าเอาท่อนบน

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

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

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครั
เริ่มหัวข้อโดย: ThaNaButS ที่ 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 ให้มันลอยอยู่หน้าสุด

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: Jaych ที่ 04 สิงหาคม 2019, 17:22:32
รอดูด้วยคน

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: TITIO ที่ 04 สิงหาคม 2019, 17:38:37
รอดูครับผม  :wanwan017:

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: wookky ที่ 04 สิงหาคม 2019, 21:28:57
ประมาณนี้ :wanwan013:
http://jsfiddle.net/chrissp26/8ygva6hm/

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: pchok ที่ 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/

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: maridb204 ที่ 05 สิงหาคม 2019, 15:10:56
bootstrap modal >> https://getbootstrap.com/docs/4.0/components/modal/

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: surasak991111 ที่ 06 สิงหาคม 2019, 19:05:42
ขอโทดนะครับ ไม่ทราบว่าใส่ตรงไหนครับ พอดีผมอยากให้ให้มันขึ้นเฉพาะบทความนั้นๆ เช่น หน้าเว็บเราปกติ แต่หากคลิกลิงค์ที่โยงไปบทความนั้น แล้วมันเด้งขึ้น ตามตัวอย่างนะครับ ผมเอาโค๊ดไปใส่ในบทความนั้น มันไม่ขึ้นครับ ขอความกรุณาด้วยครับ ขอบคุณครับชาว thaiseoboard  :wanwan011:

หัวข้อ: Re: หน้าเว็บซ้อนแบบนี้เขาทำกันอย่างไรครับ
เริ่มหัวข้อโดย: wachirawit ที่ 08 สิงหาคม 2019, 22:15:22
+1 ตามครับผม :wanwan003:


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com