BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

When You Click on Button and it appears Bootstrap Model . Model contain Some Type of Information. This is made in Bootstap in HTML5 Source .

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Source Code For This Bootstrape

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>
Filterable Table</h2>
<p>
Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>
<tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>
</thead>

    <tbody id="myTable">
<tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>
<tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@mail.com</td>

      </tr>
<tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@greatstuff.com</td>

      </tr>
<tr>

        <td>Anja</td>

        <td>Ravendale</td>

        <td>a_r@test.com</td>

      </tr>
</tbody>

  </table>
<p>
Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>



</body>

</html>

You Can Edit Code Easily and Add Your Desire type Text .

Thursday 14 February 2019

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

No comments:

Post a Comment

Follow Us

Recent

Featured post

FILTER TABLE DATA HTML5 CSS3

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Thursday 14 February 2019

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

No comments:

Post a Comment

Follow Us

Recent

Featured post

FILTER TABLE DATA HTML5 CSS3

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Total Pageviews