JSFiddle - React, Tailwind, and code Playground
HTML
<pre id="output">
</pre>
CSS
body>div {
opacity: 0;
transition: opacity 1s;
padding: 12px;
margin:6px;
display: inline-block;
border-left: 5px solid red;
background-color: #eef;
width:100%;
}
JavaScript
window.onload = function() {
var buttons = new Array();
buttons[0] = new createButton("Ok 1", function() { document.getElementById("output").appendChild(document.createTextNode("Ok 1 clicked.\r\n"));});
buttons[1] = new createButton("Cancel 1", function() { document.getElementById("output").appendChild(document.createTextNode("Cancel 1 clicked.\r\n"));});
var message = new createMessage("Message 1", "Message 1: This is a test", buttons);
message.display();
buttons = new Array();
buttons[0] = new createButton("Ok 2", function() { document.getElementById("output").appendChild(document.createTextNode("Ok 2 clicked.\r\n"));});
buttons[1] = new createButton("Cancel 2", function() { document.getElementById("output").appendChild(document.createTextNode("Cancel 2 clicked.\r\n"));});
var othermessage = new createMessage("Message 2", "Message 2: This is a test too", buttons);
othermessage.display();
setTimeout(function() {
var buttons = new Array();
buttons[0] = new createButton("Button 1", function() { document.getElementById("output").appendChild(document.createTextNode("Button 1 clicked.\r\n"));});
buttons[1] = new createButton("Button 2", function() { document.getElementById("output").appendChild(document.createTextNode("Button 2 clicked.\r\n"));});
buttons[2] = new createButton("Button 3", function() { document.getElementById("output").appendChild(document.createTextNode("Button 3 clicked.\r\n"));});
var anothermessage = new createMessage("Message 3", "Message 3: This test has three buttons", buttons);
anothermessage.display();
}, 2000);
};
//----------------------------------------
function createMessage(name, body, buttons) {
this.name = name;
this.body = body; // text to show in message
this.buttons = buttons; // an array of button objects (button name, function to call when clicked)
}
createMessage.prototype.display = function() { // display the message
this.msgElement =...