superhappybunnycat superhappybunnycat - 1 year ago 106
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 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download