const container = document.createElement('dialog'); function createDialog() { const close = document.createElement('button'); container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;'); close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0 0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;'); close.textContent = 'x'; close.onclick = () => container.remove(); document.body.appendChild(container); container.appendChild(close); plainText("I am some plain text and I love getting copied", "plainText1"); plainText("Here is another example!", "plainText2"); container.showModal(); } function plainText(textToCopy, id) { const text = document.createElement('p'); const copyText = document.createElement('button'); text.textContent = textToCopy; text.id = id; copyText.type = "button"; copyText.textContent = "Copy Plain Text"; copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;"; copyText.onclick = () => copyStuff(text.id); container.appendChild(text); container.appendChild(copyText); } // Helper function for copying text if id of element is provided function copyStuff(id) { const copyTarget = document.getElementById(id).textContent; return navigator.clipboard.writeText(copyTarget); } createDialog(); const container = document.createElement('dialog'); function createDialog() { const close = document.createElement('button'); container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;'); close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0 0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;'); close.textContent = 'x'; close.onclick = () => container.remove(); document.body.appendChild(container); container.appendChild(close); plainText("I am some plain text and I love getting copied", "plainText1"); plainText("Here is another example!", "plainText2"); littleNotePad(); container.showModal(); } function plainText(textToCopy, id) { const text = document.createElement('p'); const copyText = document.createElement('button'); text.textContent = textToCopy; text.id = id; copyText.type = "button"; copyText.textContent = "Copy Plain Text"; copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;"; copyText.onclick = () => copyStuff(true,text.id); container.appendChild(text); container.appendChild(copyText); } function littleNotePad() { const text = document.createElement('textarea'); const copyText = document.createElement('button'); text.id = "textareaId"; text.setAttribute("placeholder", "I am lil notepad"); copyText.type = "button"; copyText.textContent = "Copy Plain Text"; copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;"; copyText.onclick = () => copyStuff(false,text.id); container.appendChild(text); container.appendChild(copyText); } // Helper function for copying text if id of element is provided function copyStuff(plainText, id) { const copyTarget = plainText ? document.getElementById(id).textContent : document.getElementById(id).value; return navigator.clipboard.writeText(copyTarget); } createDialog();