sairam / bootstrap-prompts

BootStrap Alert with modal instead of Browser alert

Bootstrap-Prompts is an implementation to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with Modal information.

Demo

Requires

• Requires Twitter Bootstrap and JQuery to be initialized before using alert()

TODO

Need to implement prompt() and confirm() actions so that they return

bootstrap-prompts's Issues

Initial focus on Close button

To mimic native behaviour, initial focus should be on Close button so that it can be closed with Enter keypress

Uncaught type error...

Bootsrap 3.0 support

Hello!

I take great your script "bootstrap-prompts.js".

But after the upgrade bootsrap 3.0, it stopped working.
This is due to change the layout of modal windows.

I changed myself, and now she is working on version 3.0, but the functions and _originalAlert _originalConfirm not.
https://github.com/ARISTARH/bootstrap-prompts/blob/master/bootstrap-prompts-alert.js

Please help to fix it.

does not work in ie

In ie you get the regular alert

Do not work with Bootstrap v3.0 (have fixed source code)

It work again when fixed by myself.
Fixed source code below:

/*! bootstrap-prompts-alert.js [for Bootstrap v3.0](Fixed by Cow258)*/
bootStrapAlertHeader = 'Alert'; window._originalAlert = window.alert; window.alert = function (text) { var bootStrapAlert = function () { if (!$.fn.modal.Constructor) return false; if ($('#windowAlertModal').length == 1) return true; $('body').append('<div id="windowAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title text-danger">' + bootStrapAlertHeader + '</h4></div><div class="modal-body"><p> alert text </p></div><div class="modal-footer" style="text-align: center;"><button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button></div></div></div></div>'); return true; }; if (bootStrapAlert()) { $('#windowAlertModal .modal-body p').text(text); $('#windowAlertModal').modal(); } else { console.log('bootstrap was not found'); window._originalAlert(text); } }
bootStrapConfirmHeader = 'Confirm'; window._originalConfirm = window.confirm; window.confirm = function (text, cb) { var initTemplate = function () { if ($('#windowConfirmModal').length == 1) return true; $('body').append('<div id="windowConfirmModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title text-danger">' + bootStrapConfirmHeader + '</h4></div><div class="modal-body"><p> alert text </p></div><div class="modal-footer" style="text-align: center;"><button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">YES</button><button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">NO</button></div></div></div></div>'); }; var bootStrapConfirm = function () { if (!$.fn.modal.Constructor) return false; $('body').off('click', '#windowConfirmModal .btn-primary'); $('body').off('click', '#windowConfirmModal .btn-danger'); function confirm() { cb(true); } function deny() { cb(false); } $('body').on('click', '#windowConfirmModal .btn-primary', confirm); $('body').on('click', '#windowConfirmModal .btn-danger', deny); return true; }; initTemplate(); if (bootStrapConfirm()) { $('#windowConfirmModal .modal-body p').text(text); $('#windowConfirmModal').modal(); } else { console.log('bootstrap was not found'); cb(window._originalConfirm(text)); } };

Demo not working on chrome.

Close Alert doesn't display correctly

This works for me.

•    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">&times;</button> \
  

•    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button> \
  

Demo is broken (at least in Chrome).

The first button gives a normal plain-jane JavaScript alert().
The second button does nothing (except look pretty, thanks to Bootstrap).

(This is in the latest version of Chrome, on Windows 7.)

Close Alert doesn't display correctly

This works for me.

Changing to & t i m e s ; (without spaces)
From Close