BSConfirmation – Simple Popover con jQuery y Bootstrap



BSConfirmation – Simple Popover con jQuery y Bootstrap, este pop-over es una simple demostración de una ventana pequeña aplicable a cualquier proyecto web, sin duda este pequeño plugin nos ayuda a manipular de forma estratégica la información presentada al usuario, lo interesante que tiene este plugin es que esta realizado para ser usado con bootstrap y la forma de implementar es la siguiente.
Ejemplo:http://oscaruhp.github.io/BSCONFIRM/

1.- Primero tienes que incluir las referencias de jQuery, bootstrap y del plugin:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
                
        
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
        <script src="confirmation.js"></script>

2.- El elemento que queremos monitorear






<div class="container" style="margin:350px auto;">
          <button href="http://develoteca.com" target="_blank" class="btn btn-lg btn-danger" id="test">Click to toggle popover</button>
        </div>





3.- A continuación se agrega el script propio del plugin para crear una ventana sencilla y efectiva con bootstrap que puedes utilizar para mostrar cierta información.


        <script type="text/javascript">
            var first = $('#test').confirmation({
                onShow: function() {
                    console.log('Start show event');
                },

                onShown: function() {
                    console.log('Show event has been completed');
                },

                onHide: function() {
                    console.log('Start hide event');
                },

                onHidden: function() {
                    console.log('Hide event has been completed');
                },

                onInserted: function() {
                    console.log('Template has been added to the DOM');
                },

                onCancel: function() {
                    console.log('canceled');
                },

                onConfirm: function() {
                    console.log('confirmed');
                }
            });
        </script>

Puedes descargar el plugin y comentarnos donde lo implementaste.

You may also like...