ความผิดพลาดคืออาจารย์ 2

ดึงข้อมูลด้วย gridview แล้วคลิกลิงค์ เปิด popup พร้อมแสดงข้อมูล (popup ไม่ใช้ window.open แต่ใช้ CSS)

Posted on: พฤศจิกายน 27, 2008

css popup แสดงข้�มูลที่ดึงมา

css popup แสดงข้อมูลที่ดึงมา

1. สไตล์ pop up เอาไปใส่ในไฟล์ .css

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 300px;
height: 50%;
padding: 16px;
z-index:1002;
overflow: auto;
background-color:#FFBFBF;
border-bottom: 2px solid #F9F9F9;
border-right: 2px solid #F9F9F9;
border-left:1px solid #EFE4E4;
border-top:1px solid #EFE4E4;
}

2. ลิงค์ไฟล์ .css เข้ามาใช้ในไฟล์ xxx.aspx

<link href=”../App_Themes/themeForm/themeForm.css” rel=”stylesheet” type=”text/css” />

3. ในไฟล์ xxx.aspx ให้ดึงข้อมูลมาไว้ใน gridview(อย่าลืมใส่ DataKeyNames) โค๊ดดังนี้

<asp:GridView ID=”GridView1″ runat=”server” DataKeyNames=”member_id”
AutoGenerateColumns=”False”>
<Columns>


<asp:BoundField DataField=”member_id” HeaderText=”รหัส”>
<ItemStyle Width=”100px” />
</asp:BoundField>


<asp:BoundField DataField=”first_name” HeaderText=”ชื่อ”>
<ItemStyle Width=”100px” />
</asp:BoundField>

<asp:TemplateField>
<ItemTemplate>

<a href=”javascript:void(0);” onclick=”showpop( ‘<%# DataBinder.Eval(Container.DataItem,”last_name”).tostring%>’);”>click</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

4. สร้าง div ไว้ระหว่าง <form></form> เอาไว้นอก GridView โค๊ดดังนี้

<div id=”light” class=”white_content”>
<span id=”showw”></span>
<br />
<a href = “javascript:void(0)” onclick = “hidepop()”>Close</a>
</div>

5. สร้าง javascript ไว้ระหว่าง <head></head> โค๊ดดังนี้

<script language=”javascript” type=”text/javascript”>
function showpop(showw){
document.getElementById(‘showw’).innerHTML=showw;
document.getElementById(‘light’).style.display=’block’;

}

function hidepop(){
document.getElementById(‘light’).style.display=’none’;

}
</script>

ส่งค่าที่ต้องการแสดง ผ่าน javascript โดยให้แสดงผ่าน <span id=”showw”></span>

จบ…

ขอขอบคุณ
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

10 Responses to "ดึงข้อมูลด้วย gridview แล้วคลิกลิงค์ เปิด popup พร้อมแสดงข้อมูล (popup ไม่ใช้ window.open แต่ใช้ CSS)"

ทำไม่เป็นง่ะ
ข้อที่ 2 ไปใส่ที่ไหนเหรอ แล้วเปลี่ยนpath ได้ใช่ปะ

ใส่ในไฟล์ xx.aspx ค่ะ ในส่วน เฮด…/เฮด ค่ะ
เปลี่ยนพาธได้ตามที่อยุ่ของไฟล์ .css ตามตัวอย่างที่ำทำมันอยู่ในโฟเดอร์ App_Themes > themeForm ค่ะ

เพิ่งผ่านมาเจอ น่าสนใจดีครับ
เอ แล้วสามารถส่งมาแสดงมากว่า 1 ฟิวล์ได้ป่าวครับ

น่าจะได้นะคะ ไม่น่ามีปัญหา แต่ก็ยังไม่เคยลอง…
โปรเจคที่เอาโค๊ด popup นี้ไปใช้ จะใช้วิธีส่ง id ไป แล้วนำไป select ข้อมูลออกมาแสดงในคอลโทรล gridview อีกทีน่ะคะ

คุณ fayjaa สวยจังเลยครับ

อยากให้แสดงขั้นตอนการทำให้ดูหน่อยอ่ะค่ะพอดีว่าเพิ่งจะลองเขียนยังไม่เข้าใจว่าจะไปที่ไหนอะไรยังไงเลยอ่ะค่ะ

รบกวนช่วยสอนหน่อยนะคะ

ขั้นตอนอยู่ตามลิงค์นี้ งงยังไง สอบถามอีกทีค่ะ

ขั้นตอนการทำ popup css

ตอนกลางคืนจะทำให้นะคะ

ทำไม่ทำตาม กด click แล้วไม่ขึ้น popup

โค้ดนี้เขียนเมื่อ 4 ปีที่แล้วค่ะ คำสั่งอาจจะมีการเปลี่ยนแปลงหลายๆอย่าง ซึ่งตอนนี้ฝ้ายก็ไม่ได้เขียนโค๊ดแล้ว ลืมไปหมดแล้วจ้า

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

หมวดหมู่

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 334 other followers

brush photoshop

Add new tag asp.net atsme banner Blog ไทยโดเมน.in.th brush brush photoshop brush photoshop7 brush photoshop ตึก และ นก brush photoshop นักธุรกิจ Business Marketing Day chiangmai magazine cmhappy cmhappy.com cmtoday cmtoday cmhappy download brush download brushes photoshop CS4 download brush photoshop download บรัช e-atsme flash banner free domani FTP+PHP FW mail meeting menu photoshop brush download PHP RA Red Alert3 reggae sme tab thnic virus web design wordpress Yetii Yuri การทำ flash banner กินเนื้อสด ข้าวยาก หมากแพง ความฝัน ฆ่าควาย ฆ่าหมู่ จ๊อบ บรรจบ ชมรมเว็บมาสเตอร์ & ทำ web ทำเว็บ บรัช โฟโต้ช็อป ประกันชีวิต ปริญญา ปาย สวนบวกหาด สอบกพ สอบภาค ก หนังฆ่าคนดำ หน้าที่ webmaster หมาใจดำ หวยออก 111 หางดง เชียงใหม่ อ.ไชยยันต์ ไชยพร ออกแบบเว็บ เบื่อ เร้กเก้ เลี้ยงดง เว็บ SME เว็บเชียงใหม่ แจก brush photoshop แต่งภาพ แว่นตาเกาหลี แว่นตาแฟชั่น แว่นแฟชั่น
พฤศจิกายน 2008
พฤ อา
« ต.ค.   ธ.ค. »
 12
3456789
10111213141516
17181920212223
24252627282930

Blog Stats

  • 304,539 hits

ติดตามด้วย Twitter

  • ขอบคุณรูปจากคุณหนูนะคะ (กรอบแว่นตา รุ่นCM1612 สีน้ำตาลสว่าง) #กรอบแว่น #แว่นตา #ตัดแว่น #รูปรีวิวจากลูกค้า fb.me/5QNBeq0S0 18 hours ago
  • CAT EYE Sunglass แว่นตากันแดด ทรงแคทอาย งานสวยมากค่ะ SIZE (ขนาดที่ติดขาแว่น) : 55-17-142 ของแถม : กล่องแว่น+... fb.me/VGpuYhrC 1 day ago
  • ชีวิตเราไม่ได้ดีทุกวัน เมาท์หน่อย เช้านี้เป็นไงกันมั่งคะ วันนี้ลูกค้าแจ้งปัญหามาแต่เช้า... fb.me/5CAAnA0y4 1 day ago
  • สีดำของมาเพิ่มแล้ว กรอบแว่น TR90 เอาไปตัดเลนส์ได้ค่ะ ทรงหยดน้ำ นน.เบา ขาง้างออกได้ไม่บีบขมับ 590บ.ส่งฟรี ems fb.me/94LXIV8bH 2 days ago
  • ของเข้าใหม่ แบบสวยและราคาไม่แพง มีไม่เยอะ แบบละไม่กี่อัน หมดแล้วรอปีหน้าเลย รับตัดเลนส์ค่ะ fb.me/2QAlQl4jr 3 days ago
%d bloggers like this: