onload 在Chrome無法執行

html javascript

vsu91267 2018-07-19 11:07:49 ‧ 2785 瀏覽

分享至

<style>

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    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.9); /* Black w/ opacity */
    z-index: 999;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
 
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

</style>
<img id="cast" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="bigsec">
  <div id="caption"></div>
</div>

<script>
var modal = document.getElementById('myModal');
var img = document.getElementById('cast');
var modalImg = document.getElementById("bigsec");
var captionText = document.getElementById("caption");

img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
}
var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
    modal.style.display = "none";
}
img.onload = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
}
</script>

上面是全部的原始碼
想要在進到網頁後就馬上顯示圖片
然後用戶關掉圖片後要再點開來也可以
放在w3schools裡面跑都正常
Firefox也可以
唯獨chrome safari沒效果
想請教大神有什麼好辦法

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-07-19 11:29:36

最佳解答

應該是onload事件處理有差異...

<html>
<head>
    <title>onload event</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- CSS -->
    <style type="text/css">
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            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.9); /* Black w/ opacity */
            z-index: 999;
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;

        }

        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        .modal-content, #caption {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {-webkit-transform:scale(0)}
            to {-webkit-transform:scale(1)}
        }

        @keyframes zoom {
            from {transform:scale(0)}
            to {transform:scale(1)}
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
    </style>

    <!-- Javascript -->
    <script language="javascript">
         $(document).ready(function() {
            var modal = document.getElementById('myModal');
            var img = document.getElementById('cast');
            var modalImg = document.getElementById("bigsec");
            var captionText = document.getElementById("caption");
            var src = $(img).attr('src');

            console.log(src);
            img.onclick = function(){
                modal.style.display = "block";
                modalImg.src = this.src;
            }
            
            var span = document.getElementsByClassName("close")[0];

            span.onclick = function() {
                modal.style.display = "none";
            }
            
            modal.style.display = "block";
            modalImg.src = src;
        });
    </script>
</head>
<body>
    <img id="cast" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="bigsec" />
        <div id="caption"></div>
    </div>
</body>
</html>