วิธีการ ทำให้หน้าต่าง pop-up หลังทำงานเสร็จ

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

วิธีการ ทำให้หน้าต่าง pop-up หลังทำงานเสร็จ

Post by Ittichai_chupol »

-- หลายคนคงเคยเห็น สร้าง หน้า pop-up ขึ้นมาเพื่ออำนวยความสะดวกในการทำงาน แต่ก็ต้องลำบากขึ้นนิดหน่อยสำหรับการปิด หน้าต่าง pop-up หลังจากที่ทำงานเสร็จนั้นส่วนนั้นเสร็จ ซึ้งในบางครั่งหน้าต่าง pop-up ก็จะเป้นกดารทำงานที่ส่งค่าไป อีก หน้าหนึง ซึ่งก็ทำให้ หน้าต่าง pop-up นั้นหายไปได้
--แต่สิ่งที่จะกล่าวถึงนี้ คือการทำงานของ หน้าต่าง pop-up ภายในหน้าเดียวกัน แล้วก็ต้องมาเสียเวลาปิด มัน
--เรามาเริ่มทดลองทำกันเลย

ขั้นตอนการทำงาน

1.เราจะต้องเขียนโคด html ขั้นว่าเพื่อเป็นปุ่ม สำหรับกกดเเล้วเป้น pop-up

**ตัวอย่างโคด**

Code: Select all


<button type="button" class="button button-icon-only bbcode-img" accesskey="p" name="addbbcode14" value="Img" onclick="mpopimg()"  title="{L_BBCODE_P_HELP}">
    <i class="icon fa fa-file-image-o" aria-hidden="true"></i>
</button>

2.ต่อมาเราจะมาสร้าง html ส่วนของ หน้าต่าง pop-up

**ตัวอย่างโคด**

Code: Select all

<div id="light" class="white_content">
 <div class="messagebox_spacer">
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display = 'none';document.getElementById('fade').style.display = 'none'" >X</a>
        <div id="uploader" >
            <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
        </div>
        <br />
    </div>
</div>
<div id="fade" class="black_overlay"></div>


3. CSS สำหรับการทำ หน้าต่าง pop-up

**ตัวอย่างโคด**

Code: Select all

<style type="text/css">
    black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 2px;
        border: 0px solid #000;
        background-color: white;
        z-index: 1002;
        overflow: visible;
    }
    es fadeup {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @keyframes faderight {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes fade {
        to {
            opacity: 1;
        }
    }
    @media (max-width: 400px){
        width: 100%;
        height: 100%;
    }
 

</style> 

4.ส่วนต่อไป ก็คือ ส่วนของ javascript ซึ่งถึอว่าเป็นส่วนที่สำคัญมากๆ

**ตัวอย่างโคด**

4.1 javascript สำหรับเรียก pop-up

Code: Select all


    function mpopimg()
    {
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
    }


4.2 javascript สำหรับปิด pop-up *นำไปไว้หลังโคดการทำงาน บรรทัดสุดท้าย

Code: Select all

{
      document.getElementById('light').style.display = 'none';
      document.getElementById('fade').style.display = 'none';
}

ตัวอย่าง ตำแหน่งการทำงานโคด javascript สำหรับปิด pop-up
12-01.png
12-01.png (39.51 KiB) Viewed 315 times
ขอให้วันนี้เป็นวันที่ดี

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 24672
Joined: 22/09/2008 6:18 pm
Contact:

Re: วิธีการ ทำให้หน้าต่าง pop-up หลังทำงานเสร็จ

Post by mindphp »

ปิด popup อัตโนมัติ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests