Link to home
Start Free TrialLog in
Avatar of AlHal2
AlHal2Flag 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.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

ASKER

Thanks for this.  How do I set the text that appears in the modal box at runtime?
Avatar of 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

ASKER CERTIFIED SOLUTION
Avatar of AlHal2
AlHal2
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial