<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
   MIHCA
        </title>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link href="favicon_mihca.jpg" rel="icon" type="image/x-icon">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
        </script>
        <style type="text/css">
            html, body {
                margin              : 0;
                padding             : 0;
                width               : 100vw; /* 100% of the viewport width */
                min-height          : 100vh; /* Minimum height of 100% of the viewport height */
            }
        </style>
    </head>
    <body>
        <div>
            <img id="clickimg" src="mihca_photo3.png" style="width: 100%; height: auto;" usemap="#image-map">
            <map name="image-map">
                <area alt="mihca manila" coords="167,680,127,640" href="https://www.facebook.com/mihca.manila" shape="rect" target="_blank" title="mihca manila">
                <area alt="mihca mandaluyong" coords="167,734,126,695" href="https://www.facebook.com/MIHCAMandaluyong.PH" shape="rect" target="_blank" title="mihca mandaluyong">
                <area alt="mihca cebu" coords="491,681,452,642" href="https://www.facebook.com/MIHCACEBU.PH" shape="rect" target="_blank" title="mihca cebu">
                <area alt="mihca indonesia" coords="491,738,451,700" href="https://www.facebook.com/mihcainternational.id" shape="rect" target="_blank" title="mihca indonesia">
            </map>
        </div>
        <div class="container">
            <!-- Trigger the modal with a button -->
            <button class="btn btn-info btn-sm" data-target="#myModal" data-toggle="modal" id="clickbtn" style="visibility: hidden;" type="button">
    Open Modal
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog" style="border: 15px solid white;">
                <img id="clickimgmodal" src="magsaysay_initial_banner.png" style="width: 100%; margin:auto; padding-top: 100px; padding-bottom: 400px; background-color: #222222; ">
                <p id="p1bottom">
     .
                </p>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript">
        </script>
        <script>
            jQuery(document).ready(function() {
                jQuery("#clickbtn").click();
                jQuery("#myModal").scroll(function() {
                    var targetElement = jQuery('#p1bottom');
                    var elementOffset = targetElement.offset().top;
                    var scrollPosition = jQuery("#myModal").scrollTop();
                    var windowHeight = jQuery("#myModal").height();
                    if (scrollPosition + windowHeight >= elementOffset) {
                        $('#myModal').modal('hide');
                    }
                });
                jQuery("#clickimgmodal").click(function() {
                    $('#myModal').modal('hide');
                });
            });
        </script>
    </body>
</html>