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>
จบ…
ทำไม่เป็นง่ะ
ข้อที่ 2 ไปใส่ที่ไหนเหรอ แล้วเปลี่ยนpath ได้ใช่ปะ
ใส่ในไฟล์ xx.aspx ค่ะ ในส่วน เฮด…/เฮด ค่ะ
เปลี่ยนพาธได้ตามที่อยุ่ของไฟล์ .css ตามตัวอย่างที่ำทำมันอยู่ในโฟเดอร์ App_Themes > themeForm ค่ะ
เพิ่งผ่านมาเจอ น่าสนใจดีครับ
เอ แล้วสามารถส่งมาแสดงมากว่า 1 ฟิวล์ได้ป่าวครับ
น่าจะได้นะคะ ไม่น่ามีปัญหา แต่ก็ยังไม่เคยลอง…
โปรเจคที่เอาโค๊ด popup นี้ไปใช้ จะใช้วิธีส่ง id ไป แล้วนำไป select ข้อมูลออกมาแสดงในคอลโทรล gridview อีกทีน่ะคะ
คุณ fayjaa สวยจังเลยครับ
อยากให้แสดงขั้นตอนการทำให้ดูหน่อยอ่ะค่ะพอดีว่าเพิ่งจะลองเขียนยังไม่เข้าใจว่าจะไปที่ไหนอะไรยังไงเลยอ่ะค่ะ
รบกวนช่วยสอนหน่อยนะคะ
ขั้นตอนอยู่ตามลิงค์นี้ งงยังไง สอบถามอีกทีค่ะ
ขั้นตอนการทำ popup css
ตอนกลางคืนจะทำให้นะคะ