$(function() {
    $(".item").click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get Dialog Object
        var $dialog = $("#dialog");
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        //Set heigth and width to mask to fill up the whole screen

        //transition effect		
        // $('#mask').fadeIn(1000);
        //$('#mask').fadeTo("slow", 0.8);
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        //Set the popup window to center
        $dialog.css('top', winH / 2 - $dialog.height() / 2);
        $dialog.css('left', winW / 2 - $dialog.width() / 2);
        //Set Message
        var MSG = $(this).find(".postname").text().trim() + " " + $(this).find(".decs").text().trim();
        $dialog.find("#msg").html(MSG);
        //transition effect
        $dialog.fadeIn(20);

    });
    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });
    //if mask is clicked
    $('#mask').click(function() {
        $(this).hide();
        $('.window').hide();
    });

});

Setting Validate Copy Format

#mask{
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  opacity:0.5;
  display:none;
}
a{
  color:#333;
  text-decoration:none
}
a:hover{
  color:#ccc;
  text-decoration:none
}
#boxes #dialog{
  padding:0px;
  width:675px;
  height:100px;
  padding:10px;
  bordercolor:1px solid #445cd88;
  background-color:#44bb55;
  display:none;
  position:absolute;
  z-index:99999;
  border-radius: 1.2em;
  -moz-box-shadow:    5px 5px 2px 2px #44fc65;
  -webkit-box-shadow: 5px 5px 2px 2px #44fc65;
  box-shadow:         5px 5px 2px 2px #44fc65;
}
#dialog #title{
  background:#f8a233;
  bordercolor:1px solid #445cd88;
  border-radius: 1.5em;
  margin:0px;
  padding:5px;
}
#dialog #msg{
  margin-left:20px;
  padding:5px;
  font-size:14px;
}
#dialog .close{
  display:block;
  float:right;
  background:#afa1f5;
  bordercolor:1px solid #445cd88;
  border-radius: 1.2em;
  width:100px;
  text-align:center;
  font-size:13px;
  
}
#dialog .close:hover{
  background:#af55d9;
  bordercolor:1px solid #445cd88;
  
}
.item {
  background:#0088CC;
  color:#fff;
  margin: 10px;
  border:1px solid #3355a9;
  border-radius: 1.2em;
  padding:10px;
  -moz-box-shadow:    5px 5px 2px 2px #999;
  -webkit-box-shadow: 5px 5px 2px 2px #999;
  box-shadow:         5px 5px 2px 2px #999;
  text-shadow:0 1px 1px #194B7E;
}

Setting Validate Copy Format

<div id="panel">
  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        Orden 1 
      </span>
      <span class="decs" >
        Afiliado 1
      </span>
    </div>
    <span class="postname">
      Orden 1 
    </span>
    <span class="decs" >
      Afiliado 1
    </span>
  </div>
  
  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        Orden 2 
      </span>
      <span class="decs" >
        Afiliado 2
      </span>
    </div>
    <span class="postname">
      Orden 2 
    </span>
    <span class="decs" >
      Afiliado 2
    </span>
  </div>
  
  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        Orden 3 
      </span>
      <span class="decs" >
        Afiliado 3
      </span>
    </div>
    <span class="postname">
      Orden 3 
    </span>
    <span class="decs" >
      Afiliado 3
    </span>
  </div>
  
  <div class="item">
    <div id="popupnow" style="display:none;background-color:white;width:auto">
      <span class="postname">
        Orden 4 
      </span>
      <span class="decs" >
        Afiliado 4
      </span>
    </div>
    <span class="postname">
      Orden 4 
    </span>
    <span class="decs" >
      Afiliado 4
    </span>
  </div>
  
  <div class="item">
    <span class="postname">
      Orden 5 
    </span>
    <span class="decs" >
      Afiliado 5
    </span>
  </div>
  
  <!-- Dialog Box -->
  <div id="boxes">
    
    <div id="dialog" class="window">
      <div id="title">
        Cabecera Orden
      </div>
      <div>
        <p>
          Practica 1 
          <br>
          Practica 2 
          <br>
          Practica 3 
          <br>
          Practica 4 
          <br>
        </p>
      </div>
      <a href="#"class="close"/>
      Cerrar
    </a>
  </div>
</div>

<!-- Mask to cover the whole screen -->
<div id="mask">
</div>

Copy Format

Download