basic bootstrap alert dialog display thingy. It makes it easy to display a message or dialog to a user.

bootstrapalert.js

// This is a basic bootstrap alert dialog display thingy.
// It makes it easy to display a message or dialog to a user.
// I don't like jQuery, so I only used it where bootstrap needs it. Someone could probably clean this up slightly
//   but I'd only recommend that if it reduces the amount of code used...
// I've added another file to this gist with some calling demonstrations.
// So, obviously, you'll need to include bootstrap and jquery in your awesome page...
bsalert = function() {
    var E = function(){return document.createElement(arguments[0]);};
    function setordefault(it, value) {
        if(typeof value === 'undefined' || value == null) return it; //default
        return value;
    }

    function classSet(e, style) {
        var c = style.class.split(' ');
        for(var j=0; j<c.length, cls=c[j]; j++) e.classList.add(cls);
        e.setAttribute('style', e.getAttribute('style') + " ; " + style.style); 
    }
    function styleSet(e) {
        if(typeof e.style === 'undefined') e.style = "";
        if(typeof e.class === 'undefined') e.class = "";
    }

    var modalid = 'xmod' + Date.now().toString(16) + (~~(Math.random()*1000000)).toString(16);
    var message = "no message";
    var title = "Information";
    var buttons = [{lbl:'Ok', func:function(){$(this.dataset.modal).modal('hide');}, style:{class:"btn btn-primary",style:""}}];
    var style = {header:{class:"",style:""}, body:{class:"",style:""}, footer:{class:"",style:""}}
    var a = arguments;
    console.log(a.length);
    switch(a.length) {
        case 0: return;
        case 1: message = setordefault(message, a[0]); break;
        case 2: title = setordefault(title, a[0]); message = setordefault(message, a[1]); break;
        case 3: title = setordefault(title, a[0]); message = setordefault(message, a[1]); buttons = setordefault(buttons, a[2]); break;
        case 4: title = setordefault(title, a[0]); message = setordefault(message, a[1]); buttons = setordefault(buttons, a[2]); style = setordefault(style, a[3]); break;
    }
    if(typeof style.header === 'undefined') style.header = {class:"", style:""}; styleSet(style.header);
    if(typeof style.body === 'undefined') style.body = {class:"", style:""}; styleSet(style.body);
    if(typeof style.footer === 'undefined') style.footer = {class:"", style:""}; styleSet(style.footer);

    var modal = $('<div>').addClass('modal fade').attr('id', modalid)[0];
    var dialog = $('<div>').addClass('modal-dialog')[0];
    var content = $('<div>').addClass('modal-content')[0];
    content.style.overflow = 'auto';
    var header = $('<div>').addClass('modal-header')[0];
    classSet(header,style.header);
    var body = $('<div>').addClass('modal-body')[0];
    classSet(body,style.body);
    var footer = $('<div>').addClass('modal-footer')[0];
    classSet(footer,style.footer);

    for(var i=0; i<buttons.length, it=buttons[i]; i++) {
        var b = E('button'); b.setAttribute('type', 'button');
        b.onclick = it.func;
        b.innerHTML = it.lbl;
        classSet(b,it.style);
        b.dataset.modal = '#'+modalid;
        footer.appendChild(b);
    }

    body.innerHTML = message;

    header.innerHTML = '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">' + title + '</h4>';

    content.appendChild(header);
    content.appendChild(body);
    content.appendChild(footer);

    dialog.appendChild(content);
    modal.appendChild(dialog);
    document.body.appendChild(modal);
    $('#'+modalid).last().modal('show')
    return '#'+modalid;
}

demo.bsalert.js

// The full extent of stuff:
var dialogid = bsalert(
    "This is a long title", //title goes here
    "message with a little bit more content than usual.<p>some other stuff to go here...</p>" + //then message
    " You could put forms and junk in here too:<br><input name\"thing\" value=\"stuff\">", 
   // you can specify some buttons for the footer here:
    [{lbl:'Not Ok', func:function(){$(this.dataset.modal).modal('hide');}, style:{class:"btn btn-danger",style:""}},
    {lbl:'Ok', func:function(){$(this.dataset.modal).modal('hide');}, style:{class:"btn btn-primary",style:""}}],
    {header:{class:"",style:"background-color:#e22;"}, 
     body:{class:"",style:"box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); background-color:#ddd"}, 
     footer:{class:"someclass or another",style:""}}); //Customize the look of it
//You can clean up after yourself like this:
$(dialogid).on('hidden.bs.modal', function(){$(this).remove()});
// That basically just says to remove the elements once teh dialog is closed.

//Just a message:
bsalert("So, it has come to this...");

//Maybe add a title:
bsalert("Put the title first", "And put the message next, since that feels better...");

//skip a thing by using null:
bsalert("Put the title first", "And put the message next, since that feels better...", /*use default button*/ null,
        {header:{class:"",style:"background-color:lightblue;"} /*omit the other things, 'cause they suck */});

//don't have to specify an empty class or style if you don't want:
bsalert("Put the title first", "And put the message next, since that feels better...", /*use default button*/ null,
        {header:{style:"background-color:lightblue;"}, footer:{class:"btn-danger"} /*omit the body things, 'cause they suck */});