SimpleModal - İletişim kutusu uygulaması

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.

Download

Demo

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>