Question

我在我的一个html页面上使用了一个弹出式javascript。

它工作正常，但是...当我尝试在不同位置添加第二个时，脚本将无法正常工作。

我不确定我做错了什么。

我需要在不同位置的一个网页上至少有三个。

任何建议都将受到赞赏。

这是基本的脚本....

    <!DOCTYPE html>
    <html>
    <head>

    <script>function myfunction() {var popup1 = document.getElementById("popup1"); popup1.classList.toggle("showpopup1");}</script>

    <style>

    body {margin:0;}

    /* popup container */
    .popup1 {
        margin-left:200px; 
        margin-top:200px; 
        margin-bottom:0px; 
        position:relative; 
        display:inline-block; 
        cursor:pointer; 
        -webkit-user-select:none; 
        -moz-user-select:none; 
        -ms-user-select:none; 
        user-select:none;
    }

    /* The actual popup */
    .popup1 .popup1text {
        visibility:hidden; 
        background-color:#555; 
        color:#fff; 
        border-radius:10px; 
        padding:8px 8px 8px 8px; 
        width:400px; 
        height:80px; 
        position:absolute; 
        text-align:left; 
        z-index:1; 
        bottom:130%; 
        left:50%; 
        margin-left:-210px;
    }

    /* Popup arrow */
    .popup1 .popup1text::after {
        content:""; 
        position:absolute; 
        top:100%; 
        left:50%; 
        margin-left:-5px; 
        border-width:5px; 
        border-style:solid; 
        border-color:#555 transparent transparent transparent;
    }

    /* Toggle this class - hide and show the popup */
    .popup1 .showpopup1 {
        visibility:visible; 
        -webkit-animation:fadeIn 1s; 
        animation:fadeIn 1s;
    }

    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn{from {opacity: 0;} to {opacity: 1;}
    @keyframes fadeIn{from {opacity: 0;} to {opacity:1 ;}

    </style>

    </head>

    <body>

    <div class="popup1" onclick="myfunction()">POPUP 1<span class="popup1text" id="popup1">Popup 1 Text</span></div>

    </body>
    </html>

同一页面上的多个JS弹出窗口

0 个答案: