Закрытие окна:
<a href="javascript:self.close()">закрыть окно</a>
Всплывающие подсказки
Универсальная система всплывающих подсказок позволяет интуитивно понятно сделать систему помощи на страницах Вашего сайта. В нужном месте Вы размещаете знак вопроса ?. При наведении на него медленно и красиво возникает всплывающая подсказка, использующая стили HTML5 для закругления углов и отбрасывания тени. Если у пользователя старый браузер, то подсказка так же корректно будет работать, но в квадратном DIV без украшательств. При клике на неё происходит переход на соответствующий раздел помощи с подробным описанием.
Эта система всплывающих подсказок была разработанна для генератора карты сайта
Html:
<span class="hlp1"
onclick="return !window.open('sitemap_options.php#rs1')"
onmouseover="_tt.show(this,'Всплывающая подсказка.<br>Это вторая строка подсказки.')">?</span>
Стили:
/*всплывающие подсказки*/
#tt {position:absolute; display:block;
padding:10px;
border:solid #089dcb;
border-width:1px;
border-radius:10px 10px 10px 0px;
-webkit-border-radius:10px 10px 10px 0px;
-moz-border-radius:10px 10px 10px 0px;
-webkit-box-shadow:1px 1px 2px #888888;
-moz-box-shadow:1px 1px 2px #888888;
box-shadow:1px 1px 2px #888888;
background-color:#ffD;
}
.hlp1 { color:#000;border:#9fbddd 1px solid;background-color:#E7F5FE;
cursor:help;margin-left:5px;line-height:14px;
width:12px;display:inline-block;text-align:center;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
font-weight:100;
text-indent:0;
}
Скрипт:
var _tt=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 8;
var timer = 10;
var endalpha = 95;
var alpha = 0;
var tt,t,/*c,b,*/h;
var ie = document.all ? true : false;
return{
show:function(e,v,w){
var t=getEventTarget(e);addEvent(t,'mouseout',this.hide); t.style.cursor='help';
if(tt==null){
tt=document.createElement('div');
tt.setAttribute('id',id);
document.body.appendChild(tt);
tt.style.opacity=0;
if(ie)tt.style.filter = 'alpha(opacity=0)';
}
tt.style.display = 'block';
tt.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(tt.offsetWidth > maxw){tt.style.width=maxw+'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer=setInterval(function(){_tt.fade(1)},timer);
dd=getOffset(t);
tt.style.top = (dd.top-h+4) + "px";
tt.style.left = (dd.left+13) + "px";
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){i = endalpha - a;
}else if(alpha < speed && d == -1){i = a;}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
if(ie)tt.style.filter='alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(e){
clearInterval(tt.timer);
tt.timer = setInterval(function(){_tt.fade(-1)},timer);
}
};
}();
/* вспомогательная функция получения координат элемента */
function getOffset(elem) {
if(elem.getBoundingClientRect){
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) }
}else{
var top=0, left=0;
while(elem) {
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
return {top: top, left: left}
}
}
/* вспомогательная функция получения объекта, на котором возникло событие */
function getEventTarget(e) {
var e = e || window.event;
var target=e.target || e.srcElement;
if(typeof target == "undefined")return e; // передали this, а не event
if (target.nodeType==3) target=target.parentNode;// боремся с Safari
return target;
}
/* стандартная вспомогательная функция назначения обработчика событий */
var addEvent = (function(){
if (document.addEventListener){
return function(obj, type, fn, useCapture){
obj.addEventListener(type, fn, useCapture);
}
} else if (document.attachEvent){ // для Internet Explorer
return function(obj, type, fn, useCapture){
obj.attachEvent("on"+type, fn);
}
} else {
return function(obj, type, fn, useCapture){
obj["on"+type] = fn;
}
}
})();
Вывод окон сообщений, запросов, предупреждений.
Используя методы alert, confirm, prompt можно выводить сообщения пользователю. Сообщение, выводимое alert, используется для вывода предупреждений пользователю. Метод confirm используется для сообщений, требующих принятия решения пользователем. При использовании prompt окно сообщений содержит само сообщение и поле ввода текста, который при нажатии кнопки "OK" может передаваться серверу или использоваться при вызове другого скрипта.
Alert Confirm Prompt
Для этого используются обработчики событий onClick и методы alert, prompt, а для confirm используется функция test.
Исходный код этого примера:
<H1>Вывод окон сообщений, запросов, предупреждений.</H1>
<p>
<script type="text/javascript">
function test() {if (confirm("Для закрытия окна нажмите 'OK'?"))
{ window.close()} }
</script>
<p align=justify>Используя методы alert, confirm, prompt можно выводить сообщения пользователю.
Сообщение, выводимое alert, используется для вывода предупреждений пользователю.
Метод confirm используется для сообщений, требующих принятия решения пользователем.
При использовании prompt окно сообщений содержит само сообщение и поле ввода текста,
который при нажатии кнопки "OK" может передаваться серверу или использоваться
при вызове другого скрипта.
<center><form>
<input name=kuku type=submit value="Alert" onClick="alert('Это сообщение!')">
<input name=tutu type=submit value="Confirm" onClick="test()">
<input name=nunu type=submit value="Prompt" onClick="prompt('Укажите ваше имя','')">
</form></center>
<p align=justify>Для этого используются обработчики событий onClick и методы
alert, prompt, а для confirm используется функция test.
Защита от копирования содержимого страницы
Защитить от выделения и копирования текста страницы можно спомощью следующего кода:
<SCRIPT type="text/javascript">
document.ondragstart = test;
//запрет на перетаскивание
document.onselectstart = test;
//запрет на выделение элементов страницы
document.oncontextmenu = test;
//запрет на выведение контекстного меню
function test() {
return false
}
</SCRIPT>
Защита от копирования элементов страницы. Так, например, если необходимо защитить исключительно графические файлы, то можно обойтись следующим кодом:
<span oncontextmenu="return false;" ondragstart="return false";><img src="picture.jpg" galleryimg="no"></span>
Существует как минимум еще один вариант защиты с использованием модальных окон. Для этого, правда, страницу надо открывать через специальную кнопку:
<BUTTON onclick='window.showModalDialog("page.html")'>Показать</BUTTON>
Страницу в таком окне нельзя ни скопировать, ни сохранить - но опять же, достаточно в блокноте или через функцию браузера Вид -> Просмотр HTML-кода посмотреть код кнопки, чтобы определить адрес страницы и затем открыть ее в новом окне браузера.
Готовый пример запрета выделения отдельных блоков(работает в IE, Opera, Mozilla):
/указанный ниже блок нельзя пометить/
<div id="noselect">
.....
</div>
.....
<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined")
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined")
target.style.MozUserSelect="none"
else
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
if (document.getElementById("noselect")) disableSelection(document.getElementById("noselect"));
</script>
Запрет просмотра HTML кода
Скрыть от чужих глаз свой код невозможно, но усложнить эту задачу реально.
Попробуйте нажать правую кнопку мыши...
Для пользователей Internet Explorer 6-ой версии возможно не только отключить контекстное меню, но заблокировать меню браузера "Просмотр HTML кода" (View HTML code), делается это так:
<!--[if gte IE 5]><script type="text/javascript">
createPopup().show( 0, 0, 0, 0, 0 );
</script><![endif]-->
<body oncontextmenu="return false;">
Теперь невозможно выбрать пункт "Просмотр HTML кода" как в контекстном, так и в системном меню