Bullshit - Bootstrap Modal Dialogs

Bootstrapped drop-in replacements for window.alert(message), window.confirm(message) and window.prompt(text, value).

This "project" was started as bsprompt, because prompt was all I needed at the time. After adding alert and confirm and using it together with existing frameworks, I realized that the bs prefix was already used a lot. To avoid naming conflicts, the project's name was changed. Unless your environment already uses a lot of bullshit, there should be no issues. =)

Bootstrap and jQuery are required! (obviously...)

A simple example

<script src="bullshit.js"></script>
<a onclick="bullshit.alert('Hello World!')">Alert</a>

Blocking with callbacks

To replicate the behaviour of window.confirm(message) and window.prompt(text, value) to block and return a value, bullshit.confirm() and bullshit.prompt() use a callback function handler as optional parameter. If the dialog was closed using the button, the handler function will be called with the result as first (and only) parameter. See examples for bullshit.confirm(message, handler) and bullshit.prompt(text, value, handler) below. 

<a onclick="bullshit.confirm('Are you ready?', function(result){$('.result').html(result)})">Confirm</a>
<a onclick="bullshit.prompt('How are you?', 'great', function(result){$('.result').html(result)})">Prompt</a>

Customize

$('#bullshit-dialog')
<div class="modal" id="bullshit-dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title"><span class="glyphicon bullshit-icon"></span></h4>
      </div>
      <div class="modal-body">
        <span class="bullshit-d bullshit-alert bullshit-confirm bullshit-message"></span>
        <div class="bullshit-d bullshit-prompt">
          <label for="bullshit-value"><span class="bullshit-text"></span></label>
          <input class="bullshit-value form-control" name="bullshit-value" type="text">
        </div>
        <div class="bullshit-d bullshit-login">
          <label for="bullshit-user"><span class="glyphicon glyphicon-user"></span></label>
          <input id="bullshit-user" name="bullshit-user" value="" type="text"> <br />
          <label for="bullshit-pass"><span class="glyphicon glyphicon-lock"></span></label>
          <input id="bullshit-pass" name="bullshit-pass" value="" type="password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default alert-success bullshit-ok bullshit-d bullshit-confirm bullshit-prompt bullshit-login">
          <span class="glyphicon glyphicon-ok"></span>
        </button>
        <button type="button" class="btn btn-default alert-danger" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </div>
    </div>
  </div>
</div>
#bullshit-dialog
if none exists in the page, a fallback will be created
.bullshit-icon
glyphicons for alert, confirm, prompt and login
.bullshit-message
the message used for alert and confirm
.bullshit-text
the text used for prompt
.bullshit-value
the value used for prompt
.bullshit-user
the user used for login
.bullshit-pass
the pass used for login
.bullshit-ok
close the dialog and trigger the handler
.bullshit-d
dynamic elements (only shown for some functions!)

Download