Bugün tesadüf hep lightbox  eklentileri paylaşmak kısmet oluyor sizlere. Biraz  önce  çok  kullanışlı  ve  birçok  özelliklere  sahip  bir lightbox eklentisi  paylaşmıştık sizlere. Bu  seferki lightbox  eklentisi pek  fazla  özelliğe sahip  diyemezsek  bile  kendi  çapında kullanışlı  bir  eklentiye benziyor.

Marco Dell?Anna  tarafından geliştirilmiş olan Simple Modal  eklentisi  ile site duyurularını   lightbox  penceresi içinde ziyaretçilere  gösterebilirsiniz. Diğer lightbox eklentileri gibi elbette resimleride açabiliyorsunuz  bu tip pencereler içinde. Vimeo  videoları,  jQuery easing  ile  yukardan düşen lightboxlar, tipik  ajax çağırma gibi  özellikleri bulunuyor eklentinin.

Kullanım

Uyarı entegrasyonu : 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Alert button"});
      SM.show({
        "title":"Title",
        "contents":"Your message..."
      });
});

 Normal entegrasyon : 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Confirm button"});
      SM.addButton("Action button", "btn primary", function(){
        alert("Add your code");
        this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal",
        "title":"Title",
        "contents":"Your message..."
      }); 
});

 Tipik ajax entegrasyonu : 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"width":600});
      SM.addButton("Action button", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Title",
        "param":{
          "url":"ajax-content.php",
          "onRequestComplete": function(){ /* Action on request complete */ }
        }
      });
});

 Mootools, eklenti ve  css dosya adresleri : 

<link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>

 Html : 

	<div class="wrapper">
		<ul>
			<li class="example-item" id="alert">
				<img src="assets/images/example-1.jpg" width="196" height="147" alt="Example 1">
				<a href="javascript;">Alert</a>
			</li>
			<li class="example-item" id="confirm">
				<img src="assets/images/example-2.jpg" width="196" height="147" alt="Example 2">
				<a href="#">Confirm</a>
			</li>
			<li class="example-item" id="modal">
				<img src="assets/images/example-3.jpg" width="196" height="147" alt="Example 3">
				<a href="#">Modal</a>
			</li>
			<li class="example-item" id="modal-ajax">
				<img src="assets/images/example-4.jpg" width="196" height="147" alt="Example 4">
				<a href="#">Modal Ajax</a>
			</li>
			<li class="example-item" id="modal-image">
				<img src="assets/images/example-5.jpg" width="196" height="147" alt="Example 5">
				<a href="#">Modal Image</a>
			</li>
			<li class="example-item" id="alert-noheader">
				<img src="assets/images/example-6.jpg" width="196" height="147" alt="Example 6">
				<a href="#">No header</a>
			</li>
			<li class="example-item" id="modal-nofooter">
				<img src="assets/images/example-7.jpg" width="196" height="147" alt="Example 7">
				<a href="#">Video embed</a>
			</li>
			<li class="example-item" id="example-eheh">
				<img src="assets/images/example-8.jpg" width="196" height="147" alt="?">
				<a href="#">?</a>
			</li>

		</ul>
	</div>