LightBox

by cintia_rodrigues

HTML

/*No html temos de ter a preocupação de duas coisas*/

1.Primeira caixa com o data-layercontent="nome" 
2.Segunda Caixa com o data-layerid="nome" 
3 Usar o plugin abaixo no Js e o css indicado
4.A pagina de layout deve de estar da forma abaixo. 

Desta forma funciona abrindo uma ou varias pop up´s

<div class="hide" data-layercontent="faqContent">/*esta é a box onde está o conteudo que eu quero que apareça na view onde ela vai aparecer, colocar um data data-layercontent="nome" neste caso foi escolhido faqContent*/
  <div class="container-popup">
    <div>
      <h3>I.	En savoir plus sur la campagne « énergie moins chère ensemble » ?</h3>
      <br />
      <div class="pop-first">
        <p>LOREM IPSUM </p>
        </div>
      </div>
  </div>
</div>

/*o mesmo  data-layerid="nome" deve de ser colocado na zona onde vou clicar seja um botao ou frase */

<div class="button">
  <a href="#" class="btn btn-secondary btn-large jq_overlay" data-layerid="faqContent">LA FOIRE AUX QUESTIONS</a>
  <br />
</div>





/*Na pagina de layout deve de estar da seguinte maneira*/

@* ***POPUP*** *@
<div class="sub-overlay jq_suboverlay"></div>
<div class="wgt-msg success absolute modal jq_modal">
  <div class="out-wrpp">
    <div class="in-wrpp">
      <div class="arrow-place">
        <a class="jq_close close-wrapper" href="#">
          <img src="~/Content/Images/close.png" />
        </a>
      </div>
      <div class="clear"></div>
      <div class="jq_modalcontent"/>
    </div>
  </div>
</div>

<div class="hide" data-layercontent="privacy">
  <div class="scroll-wrpp">
    <p style="text-align: center;"><a href="#" class="jq_modalclose btn btn-primary jq_modalendclose">Close</a></p>
  </div>
</div>
@* ***POPUP END*** *@

CSS

.container-popup {

    padding:30px;
    h3 {
        color: #13608F;
        font-size:22px;
    }

    h4 {
        color: #13608F;
    }

    h5 {
        font-weight: bold;
        color: #13608F;
    }

    table {
        width: 100%;
        border: 1px solid #13608F;
        color: #13608F;

        tr, th, td {
            border: 1px solid #13608F;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 12px;
        }
    }

    ul {
        li {
            a {
                line-height: 1.4em;
                font-size:13px;
            }
        }
    }
}

JavaScript

//PLUGIN
(function ($) {
    $.fn.extend({
        //plugin name - dp_overlay
        dp_overlay: function (options) {
            //Settings list and the default values
            //subOverlay        : div class with blur effect in all window
            //overlay           : div class to show
            //content           : div class to place content
            //eventClick        : element class to fire event
            //beforeOpen        : callback function before the layer is openned
            //open              : callback function after the layer is openned
            //topOffset         : set in pixels the off set from the top to display the popup
            //verticalCenter    : bool value to wether vertical center the overlay when displaying it in the screen
            var defaults = {
                subOverlay: ".jq_suboverlay",
                overlay: ".jq_modal",
                content: ".jq_modalcontent",
                eventClick: "",
                opening: function (triggerElement) {
                },
                opened: function (triggerElement) {

                },
                topOffset: 0,
                verticalCenter: false

            }; // 
            var options = $.extend(defaults, options);

            return $(this).each(function (index, that) {
                //Assign current element to variable,
                var subOverlay = options.subOverlay;
                var overlay = options.overlay;
                var content = options.content;
                var eventClick = (options.eventClick != "") ? options.eventClick : that;
                var topOffset = options.topOffset;
                var verticalCenter = options.verticalCenter;

                $(eventClick)
                    .unbind('click')
                    .click(function (e) {
                        e.preventDefault();

                        options.opening.call(this, eventClick);

                        var id =...