Painel_dispositivos_Acoes_Interno

by Guilherme Santana

HTML

<head>

  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  <!-- Floating windows -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>

</head>



<!-- Add an optional button to open the popup -->
<button class="my_popup_open">X</button>

<!-- Add content to the popup -->
<div id="my_popup">

  <div class="container" style="margin-top:5px; margin-bottom:5px; max-width:768px;">
    <ul role="tablist" class="nav nav-tabs bs-adaptive-tabs" id="myTab">
      <li class="active" role="presentation"><a aria-expanded="true" aria-controls="home" data-toggle="tab" role="tab" id="tab1-tab" href="#tab1"><i class="fa fa-home"></i> <label>Transfomer</label></a></li>
      <li role="presentation" class=""><a aria-expanded="false" aria-controls="home" data-toggle="tab" role="tab" id="tab2-tab" href="#tab2"><i class="fa fa-archive"></i> <label>Ventilator</label></a></li>
      <li role="presentation" class=""><a aria-expanded="false" aria-controls="home" data-toggle="tab" role="tab" id="tab3-tab" href="#tab3"><i class="fa fa-calendar"></i> <label>Ventilator</label></a></li>
      <li role="presentation"><a aria-expanded="true" aria-controls="home" data-toggle="tab" role="tab" id="tab4-tab" href="#tab4"><i class="fa fa-cog"></i> <label>Input</label></a></li>
      <li role="presentation" class=""><a aria-expanded="false" aria-controls="home" data-toggle="tab" role="tab" id="tab5-tab" href="#tab5"><i class="fa fa-life-saver"></i> <label>Input</label></a></li>
      <li...

CSS

@import url('https://www.cssscript.com/wp-includes/css/sticky.css');
      @import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
      @import url('https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
      
      .nav.nav-tabs.bs-adaptive-tabs li a label {
        font-weight: normal;
      }

      @media (max-width: 768px) {
        .nav.nav-tabs.bs-adaptive-tabs {
          position: relative;
          height: 45px;
          margin-bottom: 50px;
          outline: none;
        }
        .nav.nav-tabs.bs-adaptive-tabs li {
          position: static;
        }
        .nav.nav-tabs.bs-adaptive-tabs li:nth-child(n+6) {
          visibility: hidden;
          float: right;
          clear: right;
          z-index: 10;
          margin-left: -50%;
          transition: visibility .3s;
        }
        .nav.nav-tabs.bs-adaptive-tabs li:nth-child(-n+5) {
          width: 16.6%;
          /*  100/(5+1)  */
          text-align: center;
        }
        .nav.nav-tabs.bs-adaptive-tabs li:nth-child(6) {
          margin-top: 10px;
        }
        .nav.nav-tabs.bs-adaptive-tabs li:nth-child(5):after {
          content: "\f142";
          font-family: "FontAwesome";
          cursor: pointer;
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 15px;
        }
        .nav.nav-tabs.bs-adaptive-tabs:focus:hover li {
          visibility: visible;
        }
        .nav.nav-tabs.bs-adaptive-tabs li a {
          position: static;
        }
        .nav.nav-tabs.bs-adaptive-tabs li:nth-child(n+6) a {
          background-color: #fff;
          border-color: #ddd;
          border-radius: 0;
          margin-top: 0;
          margin-right: 0;
        }
        .nav.nav-tabs.bs-adaptive-tabs li a label {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          padding: 5px 7px;
        }
      ...

JavaScript

$(document).ready(function() {

      $('#my_popup').popup({
        background: false,
        opacity: 0.1,
        transition: 'all 1s'
      });

    });