Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,308

HOME > .NET Framework > Forum > สอบถามการทำ Modal Windows ด้วย html css หน่อยครับ asp.net



 

สอบถามการทำ Modal Windows ด้วย html css หน่อยครับ asp.net

 



Topic : 122519



โพสกระทู้ ( 172 )
บทความ ( 0 )



สถานะออฟไลน์




Code CSS ครับ

Code (C#)
<style type="text/css">
/* The Modal (background) */
.modal { 
    display:none;     
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>


ส่วนนี้คือ คำสั่งครับ
Code (C#)
<body>
<form>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">ปิด</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
<script>
        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }
</script>
</form>
</body>


ส่วนที่ผิดติดปัญหาคือ เวลากด ปุ่ม Open Modal แล้วมันเปิด Modal window มาแปปนึงแล้วก็ปิด
ซึ่งผมทราบสาเหตุคือมันน่าจะเกี่ยวกับ Display:none ที่อยู่ใน CSS ด้านบนหรือป่าว พอสั่ง Open Modal มันสั่งเปิดก็จริงแต่ใน CSS มันบอกให้ ปิด ซึ่งผมก็หาวิธีการแก้ไขไม่ได้เลยครับ
เพราะว่าถ้าไม่ใส่ Display:none ไว้ใน CSS หน้าต่างมันก็จะโชว์ทันทีที่เปิดเว็บขึ้นมา



Tag : .NET, Web (ASP.NET), C#, VS 2012 (.NET 4.x)









ประวัติการแก้ไข
2016-04-20 15:04:48
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-04-20 15:03:10 By : Easy123 View : 622 Reply : 2
 

 

No. 1

Guest


จะเขียนเองทำไม

npm install bootstrap-sass

หรือ

bower install bootstrap-sass






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-20 15:07:38 By : ห้ามตอบเกินวันละ 2 กระทู้
 


 

No. 2



โพสกระทู้ ( 151 )
บทความ ( 0 )



สถานะออฟไลน์


ตามท่าน ห้ามตอบเกินวันละ 2 กระทู้ เลยครับ Bootstrap มีให้เรียบร้อยแล้ว หยิบมาใช้เลยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-20 17:14:41 By : taotechnocom
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามการทำ Modal Windows ด้วย html css หน่อยครับ asp.net
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่