ความผิดพลาดคืออาจารย์ 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/

Advertisements

11 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

  • 319,994 hits

ติดตามด้วย Twitter

  • RT @BulwarkCoin: The first #Bulwark masternodes have appeared on the network! Would you like one too? Like, Follow, Retweet and we will cho… 1 week ago
  • @msg768 Done. Thank you. Smart Rewards SWpLdynaCycCu6Zyh28S4FesNwWxgdF7dS 1 week ago
  • RT @msg768: 1. Go to wallet.smartcash.cc 2. Sign up and save your password and keys 3. Hit like and reweet this post 4. Reply with your… 1 week ago
  • ใครมีปัญหาแว่นบีบหลังหู มีวิธีแก้ค่ะ (ขออภัยค่ะนั่งไม่สุภาพ จะอัดคลิปใหม่ก็ขี้เกียจ ) #แว่นบีบหู #วิธีการดัดแว่น fb.me/3fq5vlWyh 3 weeks ago
  • รุ่นนี้กันuvได้ค่ะ ใส่ออกข้างนอกสบายหายห่วงเลย @ Chiang Mai, Thailand 3 weeks ago
%d bloggers like this: