Javascript 同一页面上有多个JS弹出窗口_Javascript_Function_Popup_Popupwindow

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

javascript function

Javascript 同一页面上有多个JS弹出窗口,javascript,function,popup,popupwindow,Javascript,Function,Popup,Popupwindow,我在一个html页面上使用了一个弹出式javascript 它很好用，但是。。。当我尝试在其他位置添加第二个脚本时，脚本无法运行我不确定我做错了什么我需要至少在一个网页在不同的位置三个这些如有任何建议，将不胜感激这是基本的脚本 <!DOCTYPE html> <html> <head> <script>function myfunction() {var popup1 = document.getEleme

我在一个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>

您的代码只有一个弹出窗口，因此我们无法重现您描述的问题。但是如果您在脚本中使用document.getElementByIdpopup1，那么是的，这只工作一次。我知道其他元素必须具有不同的ID。试过了，还有一大堆其他的“名字”、“身份证”和“功能”的改变。还是不走运。是的。。。我意识到我只包括一个弹出窗口。我这样做是有意的，而不是把失败的杂乱无章也包括在内。你需要把不起作用的东西贴出来。有一百万种不同的方法可以添加第二个弹出窗口，我们需要知道你是如何做到的；我没有看到任何与java和javascript相关的内容java.Paul。。。根据我发布的代码，如果有数百万种方法，你能给我举一个百万种方法的例子吗？因为我尝试的十几次失败了。谢谢