jQuery Popbox not like usually Popup - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title jQuery Popbox not like usually Popup, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article jQuery, Article Trik dan Tips, Article Web, we write this you can understand. Well, happy reading.

Title : jQuery Popbox not like usually Popup
link : jQuery Popbox not like usually Popup

jQuery Popbox not like usually Popup

Semakin susah ternyata mencari sumber artikel gaya punya. Apalagi konten yang dibicarakan mengenai tutorial blog, hampir sudah semua terberitakan halah :d Koben akan berbagi trick jquery plugin saja. This is story tell about jQuery PopBox!
Uniknya jQuery popbox terdapat pada hasil akhirnya. Kebanyakan trick yg bernamakan pop-pop itu seperti lightbox contoh. Konten utama akan ditimpa dengan lightbox effect secara full. Kalau si pop-box bergaya simple balloon.

Ini adalah yang dimaksudkan dengan simple balloon!!!

Mari kita bahas struktur pembangun jQuery PopBox.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function(){
  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.buka',
      box           : '.box',
      arrow         : '.arrow_'
    }, options);
    var methods = {
      open: function(event){
        event.preventDefault();
        var pop = $(this);
        var box = $(this).parent().find(settings['box']);
        box.find(settings['arrow_']).css({'left': box.width()/2 - 10});
        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },
      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };
    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });
    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });
    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()});
      $(settings['open'], this).bind('click', methods.open);
    });
  }
}).call(this);
//]]>
</script>

Semoga tidak ada yg menjadi emot ;))

Kode CSS

.popbox {
position: relative;
}
.collapse {
position: relative;
}
.buka {}
.box {
display: none;
background: #fff;
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
position: absolute;
padding: 5px;
z-index: 1;
}
.box img {
width: 100%;
height: 90%;
}
.arrow_:after, .arrow_:before {
bottom: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
}
.arrow_:after {
border-bottom-color: #fff;
border-width: 10px;
left: 10%;
margin-left: -10px;
}
.arrow_:before {
border-bottom-color: #bbb;
border-width: 11px;
left: 10%;
margin-left: -11px;
}

Markup HTML atau cara penulisan.<div class='popbox'>
<a class='buka' href='#'>Your Title Here!</a>
<div class='collapse'>
<div class='box'>
<div class='arrow_'></div>

------------- ADD YOUR CONTENT HERE -------------

</div>
</div>
</div>Setelah semua bumbu diatas masuk ke blog kalian, saatnya langkah terakhir yakni peletakan script pemanggil jQuery pop-box. Letakin diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.popbox').popbox ();
});
//]]>
</script>

Good luck :)
Sebagai bonusnya, sobat-sabit silahkan jalan-jalan yuk kemari nih ;)
http://jobyj.in/koottam-jquery-plugin/demo.html
http://www.red-team-design.com/interactive-menu-with-css3-jquery
http://webstutorial.com/css3-portfolio-menu/css3 (CSS3 version)
Happy jQuery plugin \m/

Thus articles jQuery Popbox not like usually Popup

that is all articles jQuery Popbox not like usually Popup This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article jQuery Popbox not like usually Popup with the link address https://autopostingblogspot.blogspot.com/2012/04/jquery-popbox-not-like-usually-popup.html