How to make a modal popup using bootstrap
How to make a modal
popup using bootstrap :
Hello Friends,
Today I’m taking about “How to make a modal popup using
bootstrap”. A popup window is a web browser window that is fix on our browser. This
is a JavaScript method of bootstrap. So let’s make a responsive popup for your
website with bootstrap.
Put this code in head part in your document in
Dreamweaver:-
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Put this code in body part in your document in
Dreamweaver:-
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary
btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal"
tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div
class="modal-dialog">
<div
class="modal-content">
<div
class="modal-header">
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4
class="modal-title" id="myModalLabel">Modal
title</h4>
</div>
<div
class="modal-body">
Bel-Technology Blog
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button
type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
</body>
Now
save your document in Dreamweaver and run this code on
browser. You see a
button on window like that:-
Click
on this button. You show a popup on your window screen like
that:-
See
the example on this link:-
!-------------------------------------------------------Huntertech----------------------------------------------------!
Team
0 comments