jQuery.overlay
jQuery ΡΠΊΡΠΈΠΏΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΠΊΡΠ°Π½Π° Π½Π°Π»ΠΎΠΆΠ΅Π½ΡΠΌ ΡΠ»ΠΎΠ΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ ajax Π·Π°ΠΏΡΠΎΡΠ°Ρ
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
$.overlay.show(); // ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ»ΠΎΠΉ $.overlay.hide(); // ΡΠΊΡΡΡΡ ΡΠ»ΠΎΠΉ
ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²
var overlay = $.overlay({ 'element' : 'overlay', // ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»Π°ΡΡΠ° Π±Π»ΠΎΠΊΠ° 'time' : 300 // Π²ΡΠ΅ΠΌΡ Π·Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ ΠΈΠ»ΠΈ ΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ»ΠΎΠΉ }); overlay.show(); overlay.hide();
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° ΡΠ»ΠΎΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠΎΠΊΠ°Π·ΠΎΠΌ, ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡΠΈ ajax Π·Π°ΠΏΡΠΎΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΡΠ΅Π»ΠΎΠ°Π΄Π΅Ρ
var overlay = $.overlay(); overlay.show('some_class'); overlay.hide('some_class');
CSS ΠΏΡΠΈΠΌΠ΅Ρ
Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ Π² demo
.overlay { display: none; width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 50; background-color: rgba(0, 0, 0, 0.5); }