BootPopup

Popup dialog boxes for Bootstrap.

Download latest

Available via npm
Available via bower
AMD support: require.js

BootPopup is a JavaScript library intended to simplify the task of creating Bootstrap modals.

Check out the examples to see how easy it is!

How to Use

You can download and extract the archive into your project folder, or

Install BootPopup through npm (or bower if you are using it) with:

npm install --save bootpopup

Then, include BootPopup in your HTML document. BootPopup requires jQuery and Bootstrap:

<!-- jQuery and bootstrap -->
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- BootPopup -->
<script src="node_modules/bootpopup/bootpopup.min.js"></script>

See the full documentation about how to use BootPopup in the API section on GitHub

Examples

Alert

A simple alert:

bootpopup.alert("You are now alerted by this message!");


An alert with custom title:

bootpopup.alert("You are now alerted by this message with a custom title!", "You are alerted");


Confirm

A simple confirm:

bootpopup.confirm("Do you confirm this message?");


A confirm with a custom title:

bootpopup.confirm("Do you confirm this message with a custom title?", "Confirm this message");


A confirm with a callback and response:

bootpopup.confirm("Do you confirm this message?", "Confirm this message", function(ans) { alert(ans); });


Or if you want a callback without a custom title:

bootpopup.confirm("Do you confirm this message with a callback?", function(ans) { alert(ans); });


Prompt

A simple prompt:

bootpopup.prompt("Name");


A prompt with a custom type of data. This corresponds to HTML input types:

bootpopup.prompt("Age", "number");


A prompt with a custom message:

bootpopup.prompt("Text", null, "Insert a random text:");


Or if you want a callback without a custom title and message:

bootpopup.prompt("Text", function(data) { alert(data); });


You can also request multiple values at same time, providing a list of values to input:

bootpopup.prompt([
        { label: "A text"},
        { label: "A number"},
        "<hr>",
        { label: "A select", type: "select", name: "select", options: { a:"A", b:"B", c:"C" }},
        { label: "Select multiple", type: "select", name: "multiple", multiple: "multiple", options: { a:"A", b:"B", c:"C" }},
        { label: "Radios", type: "radio", name: "radios", options: { a:"A", b:"B", c:"C" }},
        { label: "A boolean", type: "checkbox", name: "boolean"},
    ],
    function(data) { alert(JSON.stringify(data)); }
);


Customized dialog

BootPopup is also highly customizable, you can create a list of items to display very quickly. Then, you can pick up the entered data from the callback very easily:

bootpopup({
    title: "Add image",
    size: "large",
    showclose: false,
    size_labels: "col-sm-2",
    size_inputs: "col-sm-10",
    content: [
        { p: {text: "Insert image info here:"}},
        { input: {type: "text", label: "Title", name: "title", id: "title", placeholder: "Description for image", value: "Woman picking flowers"}},
        { url: {label: "Link", name: "link", id: "link", placeholder: "Hyperlink for image", value: "https://hmp.me/3lv"}},
        { checkbox: {label: "Add border to the image", name: "border", id: "border"}},
        { button: {name: "button", value: "Open image", class: "btn btn-info", onclick: function() {
                bootpopup({
                    title: $('#title').val(),
                    content: [ { img: {src: $('#link').val()}} ],
                    before: function(window) {
                        if($("#border").prop("checked"))
                            $("#image").attr("style", "border: 10px solid red");
                    }
                });
            }
        }}],
    before: function(window) { alert("Before"); },
    dismiss: function(event) { alert("Dismiss"); },
    cancel: function(data, array, event) { alert("Cancel"); },
    ok: function(data, array, event) { alert("OK\n" + JSON.stringify(data)); },
    complete: function() { alert("Complete"); },
});


If the provided functionality is not enough for your case, you can simply mix your HTML:

bootpopup({
    title: "Custom HTML",
    content: [
        '<h1>BootPopup</h1>',
        '<p class="lead">Popup dialog boxes for Bootstrap.</p>',
        '<b>BootPopup</b> is a JavaScript library intended to simplify the task of creating <a href="#">Bootstrap modals</a>',
        '<p class="lead">Check out the <a href="#examples" data-scrollto="#examples">examples</a> to see how easy it is!</p>',
        'Give us a rate 1-10:',
        { number: { label: "Rate", name: "rate", value: "11"}},
        { select: { label: "A select", name: "select", options: { a:"A", b:"B", c:"C" }}},
        { radio: { label: "Radios", name: "radios", options: { a:"A", b:"B", c:"C" }}}
    ],
    cancel: function(data, array, event) { alert("Cancel"); },
    ok: function(data, array, event) { alert("OK\n" + JSON.stringify(data)); },
    complete: function() { alert("Complete"); },
});