superhappybunnycat superhappybunnycat - 1 year ago 73
CSS Question

Adding CSS to an AJAX popup alert

I've just managed to add AJAX to my mailing list subscribe form. It works and displays a default browser pop up to show the message.

I now want to add CSS styling to it that is a fancy bar alert at the top of the page. I've created the CSS style but am stuck with how to get it in the code. I was using + .addClass("toast-top-full-width") and some other methods but everything is breaking my code.

Any help appreciated!

You can see it live here:

<script type="text/javascript" src=""> </script>
<script type="text/javascript">
$(function () {
$('#subForm').submit(function (e) {
this.action + "?callback=?",
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else { // 200
alert("Success: " + data.Message);

Answer Source

If you want to style your pop-up, you can't use the alert function. You have to add the alert box as an Html element in your page. Then you can style it in any way you want.