zarocknz/javascript-winwheel

How to use modal instead of alert?

Closed this issue · 2 comments

Really loving the winwheel buddy; excellent script! One question, I have managed to completely customise the wheel and it looks great. I was just wandering if you could help with creating a custom modal instead of the AlertPrize{} function, and use the segment name as the model content?

Any help would be appreciated, as I am not an very good coder :)

Thanks!

OK - so I think I solved it using this in the alertPrize function, probably not the best way, but works a treat!

		function alertPrize()
        {
			// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
			var winningSegment = theWheel.getIndicatedSegment();
			var txt;
			{
			txt = ("<div id='prizeText'>Congratulations! You've selected<br> " + "<span style='font-size:150%'>" + winningSegment.text + "</span>" + "</div>");
			}
			document.getElementById("prizeModal").innerHTML = txt;
			// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
			var winningSegment = theWheel.getIndicatedSegment();
			// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
			// alert("Well done, you could win " + winningSegment.text);
		  
        }

Hi @glnger if you wanted to create a modal without using another JavaScript library or framework, I found this tutorial on how to do that which seems pretty good: https://www.w3schools.com/howto/howto_css_modals.asp