superhappybunnycat superhappybunnycat - 1 month ago 10
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:
http://www.thenelunefoundation.org/new/email.php

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript">
$(function () {
$('#subForm').submit(function (e) {
e.preventDefault();
$.getJSON(
this.action + "?callback=?",
$(this).serialize(),
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else { // 200
alert("Success: " + data.Message);
;
}
});
});
});
</script>

Answer

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.