How to use modal instead of alert?
Closed this issue · 2 comments
glnger commented
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!
glnger commented
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);
}
zarocknz commented
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