We help IT Professionals succeed at work.

Amend Modal text at runtime

AlHal2
AlHal2 asked
on
Medium Priority
42 Views
Last Modified: 2020-03-04
I'm following the instructions here
The text is fixed in the example.
How do I vary the text at runtime.

In my code I need the text to vary depending on the day of the month.
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
https://developer.mozilla.org/fr/docs/Web/CSS/width#fit-content

so replace:

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
 width: 80%;


by :

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
 width: fit-content;

Author

Commented:
Thanks for this.  How do I set the text that appears in the modal box at runtime?

Author

Commented:
A modal box would probably be better than an Alert, but this seems to work.

...
var currDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
			  console.log(currDate)
			  clearTimeout(timer);
			  var message="Welcome";
			  switch (currDate)
			  {
				case "2020-2-29":
				case "2020-3-1":
				case "2020-3-2":
				case "2020-3-3":
				case "2020-3-4":
				case "2020-3-5":
				case "2020-3-6":
...
      switch (price)
					  {
						case "Research":
							message="Print off your local .";
							break;	
						case "Results":
							message="Set a challenge;
....
 alert (message);

function closeAlertBox(){

    alertBox = document.getElementById("alertBox");
    alertClose = document.getElementById("alertClose");
    alertBox.parentNode.removeChild(alertBox);
    alertClose.parentNode.removeChild(alertClose)
	alertBox.style.visibility = "hidden";
    alertClose.style.visibility = "hidden";

}


window.alert = function(msg){

    var id = "alertBox", alertBox, closeId = "alertClose", alertClose;
    alertBox = document.createElement("div");
    document.body.appendChild(alertBox);
    alertBox.id = id;
    alertBox.innerHTML = msg;
    alertClose = document.createElement("div");
    alertClose.id = closeId;
    document.body.appendChild(alertClose);
    alertClose.innerHTML = "x";
    alertBox.appendChild(alertClose);
    alertBox.style.visibility = "visible";
    /*alertClose.style.visibility = "visible";  
	I want the alert to disappear if user presses spin.  Therefore, this close must be invisible.  
	If user closes alert by clicking on x, there will be an error message as the spin button will be trying to 
	close a box that has already been closed.
	*/alertClose.style.visibility = "hidden";
    alertClose.onclick = closeAlertBox;
};

Open in new window

Commented:
see above.