bootstrap-modal

#bootstrap-
modal
Table of Contents
About 1

Chapter 1: Getting started with bootstrap-modal 2

Remarks 2

Examples 2

Installation or Setup 2

Simple Message with in Bootstrap Modal 2

Chapter 2: Examples to Show bootstrap model with different attributes and Controls 4

Introduction 4

Remarks 4

Examples 4

Bootstrap Dialog with Title and Message Only 4

Manipulating Dialog Title 4

Show a div from same page as message 5

Credits 9
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: bootstrap-modal

It is an unofficial and free bootstrap-modal ebook created for educational purposes. All the content
is extracted from Stack Overflow Documentation, which is written by many hardworking individuals
at Stack Overflow. It is neither affiliated with Stack Overflow nor official bootstrap-modal.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/ 1
Chapter 1: Getting started with bootstrap-
modal
Remarks
This section provides an overview of what bootstrap-modal is, and why a developer might want to
use it.

It should also mention any large subjects within bootstrap-modal, and link out to the related topics.
Since the Documentation for bootstrap-modal is new, you may need to create initial versions of
those related topics.

Examples
Installation or Setup

Bootstrap Model already comes with the bootstrap.min.js But to make it more simpler and more
easy to execute We will need to follow steps below.

Installation : -

Just add below css and JS to your html page.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-
dialog.min.css" rel="stylsheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-
dialog.min.js" type="text/javascript" />

Or

You can download whole package from given below Link.

https://github.com/nakupanda/bootstrap3-dialog

Simple Message with in Bootstrap Modal

Code below will show you bootstrap model without writing hole long code by generating bootstrap
model at run time. It will also make creating multiple bootstrap model i.e. one on other easy.
Follow below simple code to make simple bootstrap model.

Include below CSS to your code

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-

https://riptutorial.com/ 2
 dialog/1.34.7/css/bootstrap-dialog.min.css"/>

HTML Code for your Model to show easirly

Click Button next to see bootstrap popup with just simple message only.
<button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>

Include script below in your code to get bootstrap-model working easily

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-
dialog.min.js" type="text/javascript" />
<script>
function showModalNow(){
BootstrapDialog.show({
message: 'Hi Apple!'
});
}
</script>

Read Getting started with bootstrap-modal online: https://riptutorial.com/bootstrap-

modal/topic/7942/getting-started-with-bootstrap-modal

https://riptutorial.com/ 3
Chapter 2: Examples to Show bootstrap
model with different attributes and Controls
Introduction
Given Below are the examples to show how bootstrap model can be shown and how to manage
title main content and footer.

Remarks
This topic is created to demonstrate different ways of showing and easily managing bootstrap
model.

Examples
Bootstrap Dialog with Title and Message Only

Include below CSS to your code

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-
dialog/1.34.7/css/bootstrap-dialog.min.css"/>

HTML Code for your Model to show easirly

Click Button next to see bootstrap popup with simple message and Title.
<button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>

Include script below in your code to get bootstrap-model working easily

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-
dialog.min.js" type="text/javascript" />
<script>
function showModalNow(){
BootstrapDialog.show({
title : 'This is my custom Title',
message : 'Hi Apple!'
});
}
</script>

Manipulating Dialog Title

Include below CSS to your code

https://riptutorial.com/ 4
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-
dialog/1.34.7/css/bootstrap-dialog.min.css"/>

HTML Code for your Model to show easily

Click Button next to see bootstrap popup with simple message and Title and Buttons that
manipulates the title.
<button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>

Include script below in your code to get bootstrap-model working easily

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-
dialog.min.js" type="text/javascript" />
<script>
function showModalNow(){
BootstrapDialog.show({
title: 'Default Title',
message: 'First time showing Title.',
buttons: [{
label: 'change to Title 1',
action: function(dialog) {
dialog.setTitle('Title-1');
}
}, {
label: 'change to Title 2',
action: function(dialog) {
dialog.setTitle('Title 2');
}
}]
});
}
</script>

Show a div from same page as message

This a sample code which will show you how you can create dynamic code which will generate a
bootstrap model at run time. This also includes deciding modal title body content and buttons in
footer.

HTML code

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-
dialog.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-
dialog.min.js"></script>

<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -

https://riptutorial.com/ 5
 ->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div class="container-fluid" id="complex-div">
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-primary">

<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-success">

<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-info">

<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-warning">

<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-danger">

<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div
Show</button>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex
Div Show</button>

JQuery/Javascript

function simpleSHow(title)
{
var msg=$('#simple-div');

BootstrapDialog.show({
title : title,

https://riptutorial.com/ 6
 message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}

function complexSHow(title)
{
var msg=$('#complex-div');

BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}

Code Explanation

HTML structure :

<div>(id=hidden-div)(always hidden)
|
|---- <div>(id=simple-div)
| |
| |---- content within this div
|
|---- <div>(id=complex-div)
| |
| |---- content within this div

Here div with id "hidden-div" is a container div by which i mean that it contains different divs to be
shown in different modals. And all child div within it can be shown to one or more model at a time.

Javascript code explanation :

Upon calling the function we copied the div we want to show to a variable to use at last. After that
we call the basic syntax to dynamically create bootstrap modal in which as a messaage we directly
give the reference of the div that we want to show.

This will grab that div from the hidden-div by that I mean div that we want to show will be removed
from the container div that's why we have saved copy of it to msg variable. And when the popup
gets closed we will add that div back to the container div as if we need to to show that modal more
then once then we will have that div available to be show next time also. if we don't copy at the
beginning and add it back then next time when we want to show that modal without refreshing the
page the we will not have that div present there in container div.

Given above is a simple example to show multiple bootstrap div with in a single html page and
also without even writing a single conventional line to show model.

Read Examples to Show bootstrap model with different attributes and Controls online:

https://riptutorial.com/ 7
https://riptutorial.com/bootstrap-modal/topic/8230/examples-to-show-bootstrap-model-with-
different-attributes-and-controls

https://riptutorial.com/ 8
Credits
S.
Chapters Contributors
No

Getting started with

1 Community, Shalin Patel
bootstrap-modal

Examples to Show
bootstrap model with
2 Shalin Patel
different attributes
and Controls

https://riptutorial.com/ 9