Tuesday, 8 May 2018

015 Bootstrap Modal

Bootstrap Modal
Modal popup is like a dialog box that display over your current page.Modal popup get focus when open.Bootstrap uses attribute data-toggle="modal" and data-target to display a modal popup.

Example


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
                  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
Display Modal</button>
</div>
             <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">
                  <span>This is Modal Body</span>
              </div>
      </div>
</body>
</html>

Output

Bootstrap Example






Modal Size

You can change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.

Small Size Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
Display Modal</button>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
         <span>This is Modal Body</span>
</div></div>
</body>
</html>


Output:

Bootstrap Example





Small Large Example


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
         <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
Display Modal</button>
</div>
           <div class="modal fade" id="myModal" role="dialog">
          <div class="modal-dialog modal-lg">
          <span>This is Modal Body</span>
          </div></div>
</body>
</html>


Bootstrap Example
- No comments:
Labels:

016 Bootstrap Tooltip

Bootstrap Tooltip  

Tooltip display some information about the an element.It is a small popup like box that display the information.When mouse is over the element ,  Tooltip become visible.For Bootstrap tooltips ,data-toggle="tooltip" attribute need to add on the element.For Bootstrap tooltips , jquery inisialisation is required.

 Example


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
</br>
</br>
</br>
</br>
      <button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a default button">Default</button>
</div>

<script>
         $(document).ready(function () 
     {
           $('[data-toggle="tooltip"]').tooltip();
       });
</script>

</body>
</html>
Output


Tooltips position can be set by adding "data-placement"

 Example
Bootstrap Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
</br>
</br>
</br>
</br>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a default button ,displat at top " data-placement="top">Display Top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a default button ,displat at bottom " data-placement="bottom">Display Buttom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a default button ,displat at left " data-placement="left">Display Left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="This is a default button ,displat at right " data-placement="right">Display Right</button>

</div>

<script>
              $(document).ready(function () 
        {
                  $('[data-toggle="tooltip"]').tooltip();
              });
</script>

</body>
</html>

Output

Bootstrap Example

- No comments:
Labels:
Subscribe to: Posts (Atom)

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

  বাঙালি মানে ঘোড়া পাগল | দু একদিন ছুটি পেলো মানে বাঙালি চলল ঘুরতে | সে সমুদ্রই হোক , পাহাড়ি হোক বা নদী হোক। বাঙালির ...

  • 020 Weekend Tour Chandipur
    Another weekend Getaway of Odisha  is Balasore, commonly known as Baleshwar . Balasore is  a district  of Odisha,India. Chandipur : Chandi...
  • 019 C# Garbage Collcetion
    Garbage collection                    Garbage collection is a technique to recover the memory consumed by some unused variable and objec...
  • What is json.stringify ?
    What is json.stringify ? If the stringify method sees an object that contains a toJSON method, it calls that method, and stringifies the ...