No complicated code or configuration is required to use AlertConfirm in a basic setup. The alert or confirmation dialogue popups are styled using the web browser native controls and always force their way to the front of the screen. You can use the AlertConfirm stack for a multitude of different purposes; wherever you need to display something important for the end user to read. It is also possible to use multiple AlertConfirm stacks on the same webpage.

Example

Click the button below. You are presented with a confirmation popup. Clicking cancel works to cancel the action. Clicking OK continues the action, in this case opening a web link in a new browser tab.
 
 
As well as having an alert or confirmation appear when a button is clicked, you can also configure this stack to display your alert or confirmation on page load or when another action happens (like a form is submitted).

Setup

Install AlertConfirm into Stacks and RapidWeaver, in the normal way. Then follow these instructions to create your first alert or confirmation popup:
  1. Open your Stacks Library. Search for AlertConfirm. Drag and drop a copy of the stack into your webpage.
  2. Select the stack in edit mode and reveal its settings, in the Stacks side panel.
  3. From the Configuration menu, toggle between setting-up either an alert or confirmation popup.
  4. If using more than one AlertConfirm on the same page, change the ID number.
  5. Enter the text you want shown in the popup message.
  6. From the Trigger menu, choose how you want the alert or confirmation popup to be opened. For a button trigger, place a suitable button stack in the drop zone shown. Or use HTML code and make your own button.
  7. The Action menu lists some basic actions you have have AlertConfirm perform, when the 'OK' button is pressed. Or you can supply custom Javascript code.
  8. Preview the webpage in a normal web browser (like Firefox, Chrome, Safari or Edge) to see the AlertConfirm stack working.

Currently RapidWeaver DOES NOT DISPLAY Javascript alerts or confirmation popups in preview. There is nothing faulty with AlertConfirm! This is just the way RapidWeaver works. To see your AlertConfirm popups, you must use a normal web browser (like Firefox, Chrome, Safari or Edge). RapidWeaver already gives you the options to preview your unpublished website in one or more of these web browsers.

Each web browser displays Javascript alert and confirmation popups slightly different. You cannot change the popup style or button labels. If you are in the market for a stack that gives more control over the user interface, take a look at Gateway, TopBox or VerifyStack instead.

Customising message text

Message text needs to be entered as plain text. Double quote marks ( " and " ), HTML code and special characters are not supported and risk breaking the popup. Take care not to enter too much content, so as to cause users on smartphones an inability view the whole message! At the most, there should be no more than a few lines of written content.

If you want to put a line break between sentences or words in your message type \n where you want this to occur. Some web browsers may impose a limit on how many line breaks you can include, so be careful not to have too many or to start creating things like bulleted lists. Javascript alert and confirmation popups are not designed for this task - a modal would be a better tool for this instead.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.