Drop-in content box v2.0 - wyskakująca treść lub komunikat

Bywa że czasami chcemy aby dana treść była szczególnie zauważana przez użytkowników, i chcemy aby była na widoku. Czy jest to ogłoszenie czy reklama, czy ostrzeżenie zależy to od Ciebie. Ważne jest również to aby wyskakujące okno nie było utrapieniem dla użytkowników. I do tego własnie świetnie nadaje się ten skrypt. Jego zadaniem jest wyświetlić okienko z naszą wiadomością - i teraz w zależności od nas albo to okienko wyświetla się przez x sekund lub po najechaniu na nie myszką pojawia się w prawym górnym rogu krzyżyk, którym okienko jest zamykane przez użytkownika. I teraz mamy kilka opcji:

- zawartość pojawia się jako wbudowany DIV na stronie lub jest pobierany z zewnętrznego pliku przez ajax,
- konfigurowalny sposób wyświetlania ponad 20 efektów - domyślny jest "easeOutBounce",
- kontrola częstotliwości jak często ma byćpokazywane okn, kiedy powinno się pojawić itp., oraz częstotliwość czasowa,
- możliwość odroczenia prezentowania okna, na czas określony, lub wyświetlenie na żądanie
- oraz możliwość wyświetlania kilku okienek na raz.

Aby wszytsko miało na dodatek ładny i estetyczny wygląd, okienka wpadają na stronie w ładnym stylu - jakby spadały z góry.

This content of this drop in box is defined inline on the page, inside the DIV with id="reminder" This DIV is dropped down using the "easeInExpo" animation option. The box will not automatically disappear until the user explicitly clicks on the "close" button or by calling the user function dropinstance.hide().

Show Reminder box again | Hide Reminder Box

Oto zawartość kodu do sekcji HEAD:

<link rel="stylesheet" href="/dropincontentbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/jquery.easing.1.3.js"></script>
<script src="/dropincontentbox.js">

/***********************************************
* Drop In Content Box (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop in box to style it
showduration:10 //disappear after x seconds?
})

var dropinbox2=new dropincontentbox({
source:'#reminder', //#id of DIV to show if defined inline
cssclass:'dropinbox dropinboxaltstyle drop-shadow lifted',
fx:'easeInExpo', //alternate drop animation keyword
pos:[-20, -20], //custom position of drop in box
deferred:1 //show box 1 sec after page has loaded
})

</script>

Pliki do pobrania oraz umieszczenia w folderze strony wraz z przykładowym plikiem .htm

dropincontentbox.js
dropincontentbox.css
jquery.easing.1.3.js
dropincontent.htm

Zawartość i wywołanie skryptu w sekcji BODY:

<div id="reminder">
This content of this drop in box is defined inline on the page, inside the DIV with id="reminder" This DIV is dropped down using the "easeInExpo" animation option. The box will not automatically disappear until the user explicitly clicks on the "close" button or by calling the user function dropinstance.hide().
</div>

<a href="javascript:dropinbox2.show()">Show Reminder box again</a> | <a href="javascript:dropinbox2.hide()">Hide Reminder Box</a>

Polecem podejrzenie efektu na stronie Autora tutaj

Popularne Artykuly

Najnowsze Artykuły