Page 1 of 1

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

Posted: 12/12/2018 2:08 pm
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 341 times

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

Posted: 12/12/2018 2:32 pm
by mindphp
ปิด popup อัตโนมัติ