Painel_Dispositivo_Acoes

by Guilherme Santana

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="../../css/formulario.css" type="text/css" media="screen">


<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>

<!-- Painel interno -->
<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>

<div id="container">

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

  <div id="my_popup">

    <div id="darkOverlay" style="display: none;">
      <div id="floatWrap">
        <div id="floatContent">
          <a class="close"></a>
          <div id="mainFloat">
            <div id="menuLeft">
              <ul>
                <li class="active"><a class="floatCategory" href="#" data-content="Hello world">Transformer</a></li>
                <li class=""><a class="floatCategory" href="#" data-content="Bye bye">Input</a></li>
                <li class=""><a class="floatCategory" href="#"...

CSS

@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.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');
/*
This defines the workspace where i place the demo.
*/

#container {
  align-content: left;
  text-align: left;
  background: #FFF;
  width: 0px;
  margin: 0px auto;
  padding: 0px;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  -moz-box-shadow: 0px 0px 10px #BBB;
  -webkit-box-shadow: 0px 0px 10px #BBB;
  box-shadow: 0px 0px 10px #BBB;
}

/*
It defines the layer which will cover the site once the 
floating window is showed.
*/

#darkOverlay {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
  cursor: auto;
  display: none;
  /*hidding if there's no call */
  height: 100%;
  left: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  /*over everything */
}

/*
We want the content to be center...
*/

#floatWrap {
  margin: 0 auto;
  position: static;
  width: 878px;
  z-index: 102;
}

/*
Defining the window wrap...
*/

#floatContent {
  float: left;
  background: white;
  box-shadow: 0 3px 8px rgba(34, 25, 25, 0.4);
  z-index: 101;
  /*over the overlay*/
  margin: 80px 0 80px 0;
  position: relative;
}

/*
Defining the window...
*/

#mainFloat {
  float: left;
  margin: 0;
  width: 900px;
  min-height: 500px;
  position: relative;
  /*witht his background we divide visually
	the space*/
  background: url('imgs/bgFloat.gif') repeat-y #fff;
}

/*
Adding the X for closing the window
*/

.close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  background: transparent url('imgs/fancybox.png') -40px 0px;
  cursor: pointer;
  z-index: 1103;
  display: inline;
}

/* Left tabs menu*/

#menuLeft {
  float: left;
  width: 223px;
  margin: 90px 0 0...

JavaScript

$(document).ready(function() {

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

	    });


	    $(document).ready(function() {

	      /*
	      We use this to hide the floating window in case they click outside it.
	      As html will be 'everything', we will use then an stopPropagation event.
	      */
	      $('html, .close').click(function() {
	        $('.selection').hide();
	        $('#darkOverlay').hide();
	        $("body").css("overflow", "visible");

	      });


	      /*
	      Here we use the stopPropagation event in order to prevent hidding the 
	      floating window	when we click anywhere inside the #mainFloat element. 
	      */
	      $("#mainFloat").click(function(event) {
	        event.stopPropagation();
	      });


	      /*
	      Adding the option to hide the windows by pressing the 'escape' (ESC) 
	      key with the keyboard.
	      */
	      $(document).keyup(function(e) {
	        if (e.keyCode == 27) {
	          $('#darkOverlay').hide();
	          $("body").css("overflow", "auto");
	        }
	      });


	      /*
	      Clicking over the .floatMenu selector, we will show the floating window.
	      */
	      $('.floatMenu').click(function(event) {
	        // Showing the floating window
	        $('#darkOverlay').show();

	        // Hidding the background page scroll 
	        $("body").css("overflow", "hidden");

	        /*default content for the first tab. (you could use
	        JSON, .load, append... whatever you want */
	        $("#infoContent").html('Hello world');

	        // When clicking on the left tab menu...
	        $('.floatCategory').click(function() {

	          // Chaning the active tab... 
	          $(this).parent().addClass("active").siblings().removeClass('active');

	          //We have to know in which tab the user has clicked
	          //so we take the attribute 'data-content' as an identifier of the tab
	          var...