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!");

Run example

---

An alert with custom title:

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

Run example

---

Confirm

A simple confirm:

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

Run example

---

A confirm with a custom title:

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

Run example

---

A confirm with a callback and response:

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

Run example

---

Or if you want a callback without a custom title:

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

Run example

---

Prompt

A simple prompt:

bootpopup.prompt("Name");

Run example

---

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

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

Run example

---

A prompt with a custom message:

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

Run example

---

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

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

Run example

---

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)); }
);

Run example

---

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: "Common kingfisher"}},
        { url: {label: "Link", name: "link", id: "link", placeholder: "Hyperlink for image", value: "https://upload.wikimedia.org/wikipedia/commons/d/d2/Eisvogel_kingfisher.jpg"}},
        { 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(), id: 'image', width: '100%'}} ],
                    before: function(window) {
                        if($("#border").prop("checked"))
                            $("#image").addClass("bordered");
                    }
                });
            }
        }}],
    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"); },
});

Run example

---

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"); },
});

Run example

---