как добавить уведомление при нажатии кнопки? - PullRequest
Новая
       1

как добавить уведомление при нажатии кнопки?

0 голосов
/ 17 апреля 2020

Я хочу создавать уведомление о том, что «текст был скопирован в буфер обмена» всякий раз, когда нажимается кнопка «Копировать», аналогично тому, что происходит при копировании чего-либо с помощью кнопки «Копировать» с помощью 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>

1 Ответ

0 голосов
/ 17 апреля 2020

, если вы хотите чистый css код, вы можете использовать этот пример кода без оповещения () javascript функция: 

<!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, которые содержат различные типы модальных блоков.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...