按下按鈕時如何添加通知？

Question

每當按下我的復制按鈕時，我想創建一個通知，說“文本已復制到剪貼板”，類似於使用帶有google translate的復制按鈕復制某些內容時發生的情況。 我不想使用alert()雖然。 我也不知道如何做到這一點。 感謝您花時間閱讀本文，我的代碼如下。

 function myFunction(){ var text = document.getElementById('input').value; var textArray = text.split(" ").sort(); var output= document.getElementById('output'); output.value = textArray.toString().replace(/,/g," "); } function maFunction() { var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); elt.style.background = "blue;"; }

 body { margin-top: 20px; margin-left: 20px; display: flex; }.txt { margin-right: 20px; background: #ffffff; border-style: solid; border-color: #4CAF50; border-width: 2px; outline: none; height: 700px; width: 45%; border-radius: 10px; /*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ margin-top: 0px; }.text { border: none; margin-top: 15px; margin-left: 18px; height: 660px; width: 630px; outline: none; font-size: 24px; resize: none; }.asci { background: #ffffff; border-style: solid; border-color: #4CAF50; outline: none; height: 700px; width: 45%; border-radius: 10px; /*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ }.alpha { margin-top: 15px; margin-left: 10px; height: 660px; width: 564px; outline: none; font-size: 24px; resize: none; vertical-align: top; border: none; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; width: 100px; border-radius: 0 10px; margin-top: 0px; margin-left: 0px; font-size: 22px; cursor: pointer; }::selection { color: black; background: lightblue; }

 <html> <head> <title>alphabetical order machine</title> <link rel="stylesheet" href="alphabetical.css"> </head> <body> <form class="txt"> <textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea> </form> <form class="asci"> <textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea> <input class="button" type='button' value="copy" onclick="maFunction()"> </form> <script src="alphabetical.js"></script> </body> </html>

Answer 1

如果你想要純 css 代碼，你可以使用這個示例代碼，沒有 alert() javascript function：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .modal-window {
            position: fixed;
            background-color: rgba(200, 200, 200, 0.75);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
            opacity: 0;
            pointer-events: none;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

        .modal-window:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-window > div {
            width: 400px;
            position: relative;
            margin: 10% auto;
            padding: 2rem;
            background: #fff;
            color: #444;
        }

        .modal-window header {
            font-weight: bold;
        }

        .modal-window h1 {
            font-size: 150%;
            margin: 0 0 15px;
        }

    </style>

</head>
<body>

<input type="button" class="open-button" value="Open Modal" onclick="fadeOut()" />
<div id="open-modal" class="modal-window">
    <div>
        <h1>CSS Modal</h1>
        <div>Copy ClipBoard</div>
    </div>
</div>

<script>
    function fadeOut(){
        location.href='index.html#open-modal';
        setTimeout(function () {
            location.href='index.html#modal-close';
            }, 1000);
    }
</script>
</body>
</html>

或者你可以搜索：純css彈出框在google中，有很多css框架，如bootstrap或物化css，其中包含各種類型的模態框。

按下按鈕時如何添加通知？

問題描述

1 個解決方案

解決方案1
0 2020-04-17 18:15:13

按下按鈕時如何添加通知？

問題描述

1 個解決方案

解決方案1 0 2020-04-17 18:15:13

解決方案1
0 2020-04-17 18:15:13