In early 2014, I was introduced to Boostrap (front-end framework); 10 minutes later I was a true believer.

As I’ve been using Bootstrap for a while, there are a few customisations to controls and behaviours that I’ve implemented. In this series of articles (at least one) I’m going to share a few of these customisation. I won’t be modifying any Boostrap files. As always, these are my customisations they may not be to your liking.

This first part is about the Modals.

As understand it, the code for the Modal (also known as pop-up box, dialog box and lightbox) already exists in the page source code. An event (some Javascript) call it to show or hide. If you want multiple Modals on a page you have to add more Modal code or re-use an existing Modal. You can only have one Modal showing at a time.

I like the Boostrap Modal but I’m more accustomed to injecting the Modal code in to the page on-demand. I want to load the Modal body through AJAX (with dynamic pages). I want to be able to launch a stack of Modals on a page. Finally, I want the code to clean itself away when the Modal is closed.

I cobbled together a javascript helper “class” to help me achieve the behaviour I wanted (some jQuery is involved).

 

1. Create(id, title, url, is_big)

• id | string | A unique identifier for the dialog box, so you can refer to multiple boxes
• title | string | The label at the top of the dialog box
• url | string | The URL path of page to load into the dialog box body
• is_big | boolean | This is the width or normal width on the Modal

Creates the Modal on the page and loads the body from a URL. An existing box will be reused if the ID already exists.

BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html", true);

 

2. Close(id)

• id | string | A unique identifier for the dialog box, so you can refer to multiple boxes

Close the Modal box by the box identifier.

BSDialog.Close("123");

 

3. Clear()

Close all Modal boxes on the page.

BSDialog.Clear();

 

4. ShowToast(id, title, message, is_big)

• id | string | A unique identifier for the dialog box, so you can refer to multiple boxes
• title | string | The label at the top of the dialog box
• message | string | The body of the dialog box
• is_big | boolean | This is the width or normal width on the Modal

Creates a Modal box with a message provided.

BSDialog.ShowToast("123", "My Modal Box 123", "hello world", true);

 

Source Code

Version: 0.1.0.023
Date: 14/07/2015 11:57

Download

Source Code

Social Media

 Share Tweet

Categories

Programming

Tags

Bootstrap Javascript JQuery

Post Information

Posted on Sun 21st Aug 2016

Modified on Sat 5th Aug 2023