Lack of interest Add a XenForo alert JavaScript function

[cclaerhout]

The default JavaScript alert function is not really sexy, so it would be nice to have a XenForo alert function: it's easy and quick to use.

Example:

          function xenAlert(message){
             var $xenAlert = $('<div id="xenAlert" class="xenOverlay"><div class="formOverlay">'+message+'</div></div>')
               .appendTo('body').overlay({
                 top: 260,
                 mask: false,
                 closeOnClick: true,
                 load: true,
                 onClose: function(){
                   $xenAlert.remove();
                 }
               })
           }
          
           xenAlert('This is an alert');

-Edit-
A more open one:

    xenAlert: function(message)
     {
       if(message instanceof jQuery){
         message = message.html();
       }
       
       var $xenAlert = $('<div id="xenAlert" class="xenOverlay"><div class="formOverlay">'+message+'</div></div>')
         .appendTo('body').overlay({
           top: 260,
           mask: false,
           closeOnClick: true,
           load: true,
           onClose: function(){
             $xenAlert.remove();
           }
         })
     }

 

[Liam W]

Wouldn't the alert balloon used for new alerts work just as well?

 

[cclaerhout]

Wouldn't the alert balloon used for new alerts work just as well?

It's not really the same purpose. But I've just checked the source and XenForo has already an alert system: XenForo.alert('message'). It would still be convenient to be able to set the 2nd parameter on "false" so there's no heading.

 

[cclaerhout]

After a few tests of layouts, the easiest would be another parameter to add an extra class to the overlay container, so the heading can be customized by css. For example, the red color background doesn't suite for an "information" message.

It would be also a nice thing that the function can received a jQuery object (like the second example of the first thread - it will come from the template) that will be used to get its html content and a "data-title" to customize the heading title without manipulating any JS code. The extra class could be also manage like this to avoid to have a 5th param.

Here's what I'm personally going to use:

    alert: function(message, extraClass)
     {
       var title = '',
         extraClass = ' '+extraClass || '';
       
       if(message instanceof jQuery){
         var title = message.data('title') || '';
         if(title){
           title = '<h2 class="heading">'+title+'</h2>';
         }

         message = message.html();
       }
       
       var $xenAlert = $(
         '<div id="xenAlert" class="xenOverlay'+extraClass+'">'
           + '<div class="formOverlay">'+title+message+'</div>' +
         '</div>')
         .appendTo('body').overlay({
           top: 260,
           mask: false,
           closeOnClick: true,
           load: true,
           onClose: function(){
             $xenAlert.remove();
           }
         });
     }

 

[Chris D]

I'm a fan of both of the built in methods at the moment. Not saying it wouldn't be nice to have a third style of alert, but at the moment the two current ones are meeting my needs.

There is:

XenForo.alert('This is the message', '', 10000);

That is the info banner you get after a successful AJAX action / multi-quote.

Also there is:

XenForo.stackAlert('You can use Stack Alerts to display a message, though. And with a timeout of 0, it displays until it is dismissed. And they are stackable.', 0, '');

I guess if there was one similar to XenForo.alert() which could render as a normal overlay without an error banner or some other customisations passed to it which is what I believe cclaerhout's code may do, then that could be useful.

 

[Chris D]

XenForo.alert('Some sort of message', 'Some sort of title', false)

It's close; but it still looks like an error which may not always be the desired effect.

 

[Chris D]

Messy, but you could style it to suit in your included CSS templates. Might be tricky in case another overlay needs to open and it is actually an error that is required. This is where passing an extra class would be incredibly useful. I think it's a good idea.

XenForo.alert('Some sort of message', '<style>h2.heading { background: #176093!important; }</style> For info', false)

 

[cclaerhout]

Not saying it wouldn't be nice to have a third style of aler

No need a third alert, actually adding a custom class would be more than enough (although a management from a direct Jquery object would make coding easier too). I'm just going to use at the moment the tiny alert script on one personal script at the moment, because it's easier than overriding the default one (and cleaner than using the workaround you gave above ^^).

 

[refael]

XenForo.alert returns the jQuery object that holds the overlay.
Once you understand that, it's very easy to customize the overlay.

For adding a class

XenForo.alert('Few words...', 'Title').addClass('greenOverlay');

For non-heading overlay

XenForo.alert('Few words...', 'Title').find('h2.heading').remove();