Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      a.mainbutton {
        margin: 10px 10px 10px 10px;
      }
      div.onofftable {
​
      }
    </style>
  
  </head>
  <body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.modal-trigger').leanModal();
    });
    </script>
    <div class="row">
      <div class="col s12">
        <ul class="tabs">
          <li class="tab col s3"><a href="#test1">Test 1</a></li>
          <li class="tab col s3"><a href="#test2">Test 2</a></li>
          <li class="tab col s3"><a href="#test3">Test 3</a></li>
          <li class="tab col s3"><a href="#test4">Test 4</a></li>
        </ul>
      </div>
    </div>
    <section style="display: table">
      <header  style="display: table-row">
        <div style="display: table-cell"><a class="waves-effect waves-light btn modal-trigger" href="#footer">On</a></div>
        <div style="display: table-cell"><a class="mainbutton waves-effect waves-light btn" href="#">Off</a></div>
        <div style="display: table-cell"><p>Service 1: Status</p></div>
      </header>
      <header  style="display: table-row">
        <div style="display: table-cell"><a class="mainbutton waves-effect waves-light btn modal-trigger" href="#footer">On</a></div>
        <div style="display: table-cell"><a class="mainbutton waves-effect waves-light btn" href="#">Off</a></div>
        <div style="display: table-cell"><p>Service 2: Status</p></div>
      </header>
      <header  style="display: table-row">
        <div style="display: table-cell"><a class="mainbutton waves-effect waves-light btn" href="#">On</a></div>
        <div style="display: table-cell"><a class="mainbutton waves-effect waves-light btn" href="#">Off</a></div>
        <div style="display: table-cell"><p>Service 3: Status</p></div>
      </header>
    </table>
    <a class="waves-effect waves-light btn modal-trigger" href="#footer">On</a>
    <div id="footer" class="modal">
      <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
      </div>
      <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
      </div>
    </div><!-- /.modal  -->
  </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers