Цитата:
Или это опять мне делать нужно? :D |
Как вариант, с тем же недостатком
<style> .popup { position:fixed; top:40%; left:40%; display:none; background-color:lightgreen } </style> <button id='i1' value='0'>Mess1</button> <button id='i2' value='1'>Mess2</button> <button id='i3' value='2'>Mess3</button> <button id='i4' value='3'>Mess4</button> <div class='popup'>ntcy</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> messages =['Сообщение 1','Сообщение 2','Сообщение 3','Сообщение 4']; $('button').on( "click" , function(e) { e.preventDefault(); $('.popup').css('display','block'); $('.popup').text(messages[$(this).val()]); setTimeout( function () { $('body').on('click', closePopup) } ); return false; }); function closePopup() { $('.popup').css('display','none'); $('body').off('click', closePopup); }; </script> |
ksa,
Цитата:
|
Цитата:
|
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> div { display: none; border: 1px solid; } .on { display: block; } a { display: block; margin-top: 20px; } a:first-child { margin-top: auto; } </style> <script type='text/javascript'> $(function(){ $('a').click(function(){ $(this).next().addClass('on'); setTimeout(function(){ $(document).on('click', closePopup); },500); }); function closePopup (event){ var obj=event.target||event.srcElement; if ($(obj).hasClass('on') || ($(obj).parents('.on').length>0)) { return; }; $('.on').removeClass('on') $(document).off('click', closePopup); } }); </script> </head> <body> <a href="#">Открыть</a> <div id="box1">Наш блок 1</div> <a href="#">Открыть</a> <div id="box2">Наш блок 2</div> <a href="#">Открыть</a> <div id="box3">Наш блок 3</div> <a href="#">Открыть</a> <div id="box4">Наш блок 4</div> <a href="#">Открыть</a> <div id="box5">Наш блок 5</div> </body> </html> |
ksa,
Ну вот, дело завершено:dance: А ТС молчит... |
Цитата:
|
ksa,
Цитата:
|
Цитата:
Ты копирни текст и сохрани локально, потом запусти. Тут на форуме структура документа более сложная... ;) |
Мой вариант без недостатка вроде живой
<style> .popup { position:fixed; top:40%; left:40%; display:none; font-size: 20pt; background-color:lightgreen } </style> <button id='i1' value='0'>Mess1</button> <!-- value - индекс для сообщения --> <button id='i2' value='1'>Mess2</button> <button id='i3' value='2'>Mess3</button> <button id='i4' value='3'>Mess4</button> <div class='popup'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> messages =['Сообщение 1','Сообщение 2','Сообщение 3','Сообщение 4']; // набор сообщений $('button').on( "click" , function(e) { // клик по кнопке $('.popup').css('display','block'); // показ блока $('.popup').text(messages[$(this).val()]); // вставка нужного сообщения в блок setTimeout( // ksa сказал зачем function () { $('body').on('click', closePopup) // включение закрытия по клику везде } ); return false; }); function closePopup(event) { // описание закрытия по клику везде var obj=event.target||event.srcElement; // кликнутый элемент if ($(obj).hasClass('popup')) return; // кроме клика по popup $('.popup').css('display','none'); // закрытие блока $('body').off('click', closePopup); // выключение закрытия по клику везде }; </script> |
Часовой пояс GMT +3, время: 20:34. |