Customizing the look of a cfform alert
As a follow up from the post Alert box for cfform, we would like to show how to change the appearance and size of an alert popup.
First, we will create the alert using a different technique that will give us a pointer to the created alert so that we can change the size. All the other style properties can be set globally and will apply to all alerts, no matter how they were created (either by Alert.show() or by alert()).
As a follow up from the post Alert box for cfform, we would like to show how to change the appearance and size of an alert popup.
First, we will create the alert using a different technique that will give us a pointer to the created alert so that we can change the size. All the other style properties can be set globally and will apply to all alerts, no matter how they were created (either by Alert.show() or by alert()).
var myAlert = mx.controls.Alert.show("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, this, myClickHandler);
after that, we can change the size of the window by
myAlert.width = 300;
myAlert.height = 150;
Note that setting the width and height may create a scrollbar if the text is too long.
Or change a specific css property:
myAlert.setStyle("fontStyle", "italic");
We can also change other properties of all alerts before they are created:
//we can set any css value such as fontWeight or fontSize
_global.styles.Alert.setStyle("color", 0xFF0000);
//to change the labels of the buttons:
mx.controls.Alert.cancelLabel = "Don't!";
mx.controls.Alert.yesLabel = "Sure";
//to change the size of the buttons:
mx.controls.Alert.buttonWidth = 100;
//set the style of the title only with a named style declaration
mx.controls.Alert.titleStyleDeclaration = "windowStyles";
Donload the source for the complete code
Update: See follow up post