为笔记应用程序动态创建模态

Question

I am working on a simple note taking app using vanilla javascript. I am trying to have the program add the note with a modal that when clicked would show the text.我正在使用 vanilla javascript 开发一个简单的笔记应用程序。我试图让程序添加带有模式的笔记，单击时会显示文本。 With what I have so far it is adding the note below the input box and along with the modal button.到目前为止，它是在输入框下方添加注释以及模式按钮。 When I click the modal button it does nothing the first click.当我单击模态按钮时，第一次单击时它什么也不做。 On the second click the text and modal button disappear.第二次单击时，文本和模式按钮消失。

    <!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Note Tracker</title>
    
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #4CAF50;
}
</style>
</head>
<body>
    <h1>Note Tracker Web App</h1>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <label for="iNote">Input Note:</label><br>
    <br>
    <textarea id="inote" name="inote" rows="4" cols="50">
    </textarea>
    <br>
    <button type="button" id="btn" onclick="addNote()">Add Note</button>
    <br><br>
    <div id="noteList">
      <span class="close">&times;</span>

    </div>

    <script src="scripts.js"></script>

</body>

Javascript is the below that creates the note and then add it along with the modal Javascript 是创建注释的下方，然后将其与模态一起添加

    function addNote(){
    
    var item = document.getElementById("inote").value
    var text = document.createTextNode(item)
    var newItem = document.createElement("P")
    newItem.appendChild(text)
    document.getElementById("noteList").appendChild(newItem)
    
    var x = document.createElement("BUTTON");
    x.id = "someId";
    //x.onclick ="modalOpen()";
    x.onclick = function(){
        var modal = document.getElementById("noteList");
        var btn = document.getElementById("someId");
        btn.onclick = function() {
            modal.style.display = "none";
        }
    };
    var t = document.createTextNode("Open Modal");
    x.appendChild(t);
    document.getElementById("noteList").appendChild(x); 
    var z = document.createElement("BR");
    document.getElementById("noteList").appendChild(z);

    var newElem = document.createElement("BR");
    document.getElementById("noteList").appendChild(newElem);

}

Answer 1

on first time, you are just attach event listener of click, simply put x.onclick outside the function第一次，你只是附加点击的事件侦听器，只需将 x.onclick 放在 function 之外

Answer 2

Hopefully this one will help.希望这会有所帮助。

So we have the "note-list" to handle the list.所以我们有“笔记列表”来处理列表。 I create a modal element that can activate when we click on the "new note" button.我创建了一个模态元素，当我们点击“新笔记”按钮时它会被激活。

In here I play with opacity and z-index to show this modal.在这里，我使用不透明度和 z-index 来显示这个模态。 Can be better than this.可以比这更好。

 const newNote = document.getElementById('new-note'), addNote = document.getElementById('add-note'); let myModal = document.getElementById('my-modal'); newNote.addEventListener('click', () => { myModal.style.zIndex = 99; myModal.style.opacity = 1; }); addNote.addEventListener('click', () => { let note = document.getElementById('note'), noteList = document.getElementById('note-list'); if (note.value.== '') { let _el = document;createElement('li'). _el.innerHTML = note;value. let _a = document;createElement('a'). _a;innerHTML = 'delete'. _el;appendChild(_a). noteList;appendChild(_el). note;value = ''. myModal.style;zIndex = -1. myModal.style;opacity = 0. _a,addEventListener('click'. (e) => { e.target.parentNode;remove(); }); } else { alert('note can not empty'); } });

 #my-modal { width: 100%: height: 100%; z-index: -1; opacity: 0; position: absolute; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; }.modal-wrapper { border-radius: .5rem; background: #fff; display: block; padding: 1rem; margin-top: 20%; } ul { display: block; } #note-list li { display: block; margin-bottom: .5rem; border: 1px solid #efefef; background: #f7f7f7; border-radius: .5rem; position: relative; padding: 1rem; width: 70%; } #note-list li a{ position: absolute; right: 0; top: 0; background: tomato; padding: 1rem; color: #fff; }.modal-wrapper * { display: block; margin: .5rem auto; width: 90%; text-align: center; }

 <h1>Note Taker App</h1> <div class="note-wrapper"> <ul id="note-list"> </ul> <button id="new-note">New Note</button> </div> <div id="my-modal"> <div class="modal-wrapper"> <label for="note">Your Note</label> <input type="text" name="note" id="note"> <button id="add-note">add note</button> </div> </div>

为笔记应用程序动态创建模态

问题描述

2 个解决方案

解决方案1
0 2020-12-03 04:02:25

解决方案2
0 2020-12-03 04:59:00

为笔记应用程序动态创建模态

问题描述

2 个解决方案

解决方案1 0 2020-12-03 04:02:25

解决方案2 0 2020-12-03 04:59:00

解决方案1
0 2020-12-03 04:02:25

解决方案2
0 2020-12-03 04:59:00