Modals

Quick Start

simpleDialog is a jQuery plugin to create responsive, customizable alert, confirmation dialog popups with bootstrap modal components. See the below example to display an Basic confirmation modal

Basic Usage

To display a simple confirmation modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Click to open Modal

<script type="text/javascript">
    $(document).ready(function (event) {
        $('#simple-dialog-1').click(function(event){
            event.preventDefault();
            <!-- Initialising simpleDialog with empty parameters -->
           $.simpleDialog({});
        });
    });
</script>

Modal with calbacks

Here we can create confirmation modal with confirm and cancel callback by passing two functions to onSuccess and onCancel parameters of simpleDialog. it will be executed after user perform a confirmation or cancel operation.

Example

Modal with success callback button will create a modal and display an alert like "You confirmed" when you confirm the confirmation. Modal with cancel callback also create a modal and display an alert like "You cancelled" when you reject confirmation.

Modal with success callback Modal with cancel callback

<!-- HTML Contents -->

<a href="#" id="simple-dialog-2" class="btn btn-success">Modal with success callback</a>
<a href="#" id="simple-dialog-3" class="btn btn-danger">Modal with cancel callback</a>

<!-- Javascript code to generate modals with callbacks -->
<script type="text/javascript">
    $(document).ready(function (event) {
        $('#simple-dialog-2').click(function (event) {
            event.preventDefault();
            $.simpleDialog({
                onSuccess: function () {
                    alert("You confirmed");
                }
            });
        });

        $('#simple-dialog-3').click(function (event) {
            event.preventDefault();
            $.simpleDialog({
                onCancel: function () {
                    alert("You cancelled");
                }
            });
        });
    });
</script>

Modal with HTML string

To change modal content by passing html string to simpleDialog.

Example

Click to open modal

<!-- HTML contents -->
<a href="#" id="simple-dialog-4" class="btn btn-primary">Click to open modal</a>

<!-- Script to initialize modal -->
<script type="text/javascript">
    $(document).ready(function (event) {
        $('#simple-dialog-4').click(function (event) {
            event.preventDefault();
            var modalContent = '<div class="modal-header bg-white">' +
    '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
    '<h4 class="modal-title capitalize-first-letter">Fill with your details</h4>' +
'</div>' +
'<div class="modal-body">' +
    '<div class="form-group">' +
        '<input type="text" name="firstName" class="form-control" id="firstName" placeholder="First Name"/>' +
    '</div>' +
    '<div class="form-group">' +
        '<input type="text" name="lastName" class="form-control" placeholder="Last Name" id="lastName"/>' +
    '</div>' +
'</div>';
            $.simpleDialog({
                modalContent: modalContent,
                onSuccess: function () {
                    var firstName = $('#firstName').val();
                    var lastName = $('#lastName').val();
                    alert("Hai " + firstName + ' ' + lastName);
                },
                onCancel: function () {
                    alert("You cancelled");
                }
            });

        });
    });
</script>

Other Options

Options can be passed via javascript.

Name	type	default	description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
Title	String	`'Confirm'`	This will display as title of modal
Message	String	`'Do you want to continue?'`	This will display as text content of modal.
closeButton	Boolean	true	To remove close button from modal set `closeButton` to `false`.
closeButtonTemplate	String	`<button type="button" id ="cancel-btn" class="btn btn-default">Close</button>`	This will display as close button of modal.
closeBtnText	String	`'close'`	This will display as close button text.
confirmBtnText	String	`'Okay'`	This will display as confirm button text.

Example

In this example the modal will pop up with backdrop = false, close button text = 'No! Cancel', confirm button text = 'Yes! Confirm', title = 'Reset Password' and message = 'Do you want to change password'

Click to open modal

<script type="text/javascript">
    $(document).ready(function (event) {
        $('#simple-dialog-5').click(function (event) {
            event.preventDefault();
            $.simpleDialog({
                title: "Reset Password",
                message: "Do you want to change password?",
                closeButton: true,
                backdrop: false,
                closeBtnText: "No! Cancel",
                confirmBtnText: "Yes! Confirm",
                onSuccess: function () {
                    alert("You confirmed to change password");
                },
                onCancel: function () {
                    alert("You cancelled");
                }
            });
        });
    });
</script>