magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Confirm


The most lightweight solution to have a custom confirmation-box in your website that fits the design, scheme and colors!
This extension replaces the standard javascript confirm() function with some minor changes in your code and can interact with other objects, functions and even in (almost?) any other scenario that confirm() is invoked.
It is cross-browser compatible and even supports old ones, tested in all major browsers and touch devices.
Sample project included.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.1.1

- The core has been moved to an external file for a faster navigation between pages.
- Minor core tweaks.

* New in version 1.1

- Added support for RWD.
- Improved message box positioning.
- Improved keyboard navigability in FireFox.



How to use?

1. Design a layer as you usually do (will be used as the new confirmation-box layout).
2. Add text object within the layer and setup the font type and the color (will be used to display
    the message).
3. Add an [ok] or [yes] button (or a similar object - it will be used to close the confirmation message
    and run the "risky" process).
4. Add a [cancel] or [no] button (or a similar object - it will be used to close the confirmation message
    and, optionally, run other opposite process).
5. Drag and drop the [rz] Confirm extension and put it on top (the last object you add -- also can be
    placed within the layer to be used as the new confirmation box).
6. Open the extension properties dialog and enter the layer id, the text object id and the [ok] and
    [cancel] buttons id.
7. Optionally, you can add other decorative elements to the layer.
8. Optionally, you can fine-tune the screen-cover color, the fade-in/out effect, etc.

Inlines frames:

If a page is called from a parent page, follow the same steps as described; just put the confirmation elements in the "caller" page instead of in the embedded page. And in the embedded page (i.e. a php form), just drag and drop the [rz] Confirm (ifr) extension.

What must be changed?

The classic call to the system confirm() function is:

if (confirm('You are about to delete the current record. Are you sure?'))
{
  
... here is the code ...
}


The minor change should be as follows:

rzConfirm('You are about to delete the current record. Are you sure?',
          myFunctionToDeleteTheRecord);


or you can have an anonymous function call as follows:

rzConfirm('You are about to delete the current record. Are you sure?',
          function()
          {
            
... here is the code ...
          });


Also you can run an opposite function for the cancelled operation:

rzConfirm('You are about to delete the current record. Are you sure?',
          myFunctionToDeleteTheRecord, myCancelFunction);


or both can be anonymous calls:

rzConfirm('You are about to delete the current record. Are you sure?',
          function()
          {
            
... here is the code for yes ...
          },
          function()
          {
            
... here is the code for no ...
          }
         );

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with