Avatar of AlHal2
AlHal2
Flag for United Kingdom of Great Britain and Northern Ireland asked on

Amend Modal text at runtime

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.
HTMLJavaScript

Avatar of undefined
Last Comment
AlHal2

8/22/2022 - Mon
leakim971

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;
AlHal2

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

ASKER
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

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
AlHal2

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.