[jQuery Plugin] Custom Popup v1.0

Caglar · 24. Oktober 2015

Guten Tag,
Ich habe mein erstes Plugin für jQuery entwickelt und möchte es gerne zum kostenlosen Download stellen.
Vielleicht kann es der ein oder andere ja benötigen.

Das Plugin ermöglicht es Popups zu erstellen und Sie individuell zu gestalten. Beim Schließen
des Popups wird das Element gelöscht und beim wieder Eröffnen neuerstellt.

So sieht es standardmäßig aus

Mit einigen Anpassungen kann es jedoch auch so aussehen (bisher können nur Farben angepasst werden , es kann aber auch die .css Datei angepasst werden).

Es war nur für meine Übungszwecken und ist mehr oder weniger für die Weiterentwicklung gedacht.

Beispiel

HTML

<div class="developerText customPopupHide">
	<p>
		Das Plugin wurde von Caglar entwickelt.
	</p>
</div>

JavaScript

var developerPopup = $('body').customPopup();
developerPopup.create({
	'popup.id': 'customPopup_developer',
	'popup.title': 'Titel',
	'popup.content': $('.developerText').html(),
	'popup.box.background': '#d7d7d7',
	'popup.box.h2.background': '#2d2d2d',
	'popup.box.h2.color': '#ffffff',
	'popup.box.h2.close.color': '#ffffff',
	'popup.box.text.color': '#2d2d2d'
});

developerPopup.show();

Alles anzeigen

Download
Version 1.0

Snippet

JavaScript

/*! customPopup v1.0 | (c) 2015 Caglar */
(function($){
	$.fn.extend({
		customPopup: function(params) {
			var conf = {
				'popup.id': 'customPopup_example',
				'popup.title': 'Custom Popup',
				'popup.content': 'Here you can place your content.',
				'popup.box.background': '#ffffff',
				'popup.box.h2.background': 'rgba(0, 0, 0, .05)',
				'popup.box.h2.color': '#222222',
				'popup.box.text.color': '#222222'
			};

			var obj = this;

			function create() {
				$('body').append(""
					+ "<div id=\"" + conf['popup.id'] + "\" class=\"customPopup\" data-popup=\"" + conf['popup.id'] + "\">"
					+ "<div class=\"box\">"
					+ "<h2>"
					+ "<a class=\"close\" href=\"javascript:void(0);\">"
					+ "<i class=\"ion-close-circled\"></i>"
					+ "</a>"
					+ "<span class=\"left\">" + conf['popup.title'] + "</span>"
					+ "<div class=\"clear\"></div>"
					+ "</h2>"
					+ "<div class=\"text\">"
					+ conf['popup.content']
					+ "</div>"
					+ "</div>"
					+ "</div>"
				);

				$(obj).find('.box').css('background', conf['popup.box.background']);
				$(obj).find('.box > h2').css('background', conf['popup.box.h2.background']);
				$(obj).find('.box > h2').css('color', conf['popup.box.h2.color']);
				$(obj).find('.box > h2 > .close').css('color', conf['popup.box.h2.close.color']);
				$(obj).find('.box > .text').css('color', conf['popup.box.text.color']);

				$(obj).find('.close').click(function() {
					$('#' + conf['popup.id']).fadeOut(400);

					setTimeout(function() {
							$('#' + conf['popup.id']).remove();
					}, 500);
				});
			}

			return {
				create: function(customConfig) {
					$.each(customConfig, function(index, value) {
						conf[index] = value;
					});

					create(conf);
				},
				show: function() {
					create(conf);
					$('#' + conf['popup.id']).fadeIn();
				}
			}
		}
	});
})(jQuery);

Alles anzeigen