Breaking News
Loading...

How to make a modal popup using bootstrap

Share on Google Plus


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>

 

</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">&times;</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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

You Might Also Like

0 comments

Our Logo

Our Logo
Tech Hunters

Like us on Facebook