ifhub/ifhub.club
1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-07-03 06:55:03 +03:00
Code Issues Releases Wiki Activity

Модальные окна

Browse source
This commit is contained in:
Denis Shakhov 2012-09-28 11:13:46 +07:00
parent 3fadd1ea85
commit c1a397b97b
7 changed files with 72 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
templates/skin/default/actions/ActionIndex/index.tpl
View file

@ -1,5 +1,6 @@
{include file='header.tpl'}
index page
index page<br />
<a href="#" class="modal-test link-dotted">test modal window</a>
{include file='footer.tpl'}

8
templates/skin/default/css/main.css
View file

@ -15,6 +15,12 @@ h3 { font-size: 18px; line-height: 26px; margin-bottom: 10px; }
p { margin-bottom: 10px; }
a { color: #00e; }
a:hover { color: #f00; }
a.link-dotted { text-decoration: none; border-bottom: 1px dotted #00e; }
a.link-dotted:hover { color: #f00; border-color: #f00; text-decoration: none; }
/* Grid
---------------------------------------------------- */
@ -26,6 +32,8 @@ p { margin-bottom: 10px; }
#sidebar { float: left; width: 300px; }
#footer { padding: 10px; background: #f7f7f7; }
#content.content-full-width { width: 880px; }
/* Footer
---------------------------------------------------- */

39
templates/skin/default/css/modals.css Normal file
View file

@ -0,0 +1,39 @@
/* --------------------------------------------
MODAL WINDOWS
-------------------------------------------- */
.modal {
display: none;
position: fixed;
top: 25%;
left: 50%;
width: 300px;
margin-left: -150px;
border: 1px solid #888;
background-color: #fff;
overflow: hidden;
}
.modal .close {
position: absolute;
top: 14px; right: 14px;
font-size: 14px;
font-weight: bold;
color: #777;
text-decoration: none;
}
.modal .close:hover { color: #333; }
.modal .modal-header { background: #fafafa; border-bottom: 1px solid #f7f7f7; padding: 10px 20px; }
.modal .modal-header h3 { font-size: 20px; font-weight: bold; margin: 0 20px 0 0; overflow: hidden; }
.modal .modal-content { padding: 20px; }
.jqmOverlay { background-color: #000; }
* html .modal { position: absolute; top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); }

3
templates/skin/default/header.tpl
View file

@ -56,13 +56,14 @@
<body class="">
{hook run='body_begin'}
{include file='modal_test.tpl'}
<div id="container" class="{hook run='container_class'}">
{include file='header_top.tpl'}
{include file='nav.tpl'}
<div id="wrapper" class="clearfix">
<div id="content">
<div id="content" class="{if $noSidebar}content-full-width{/if}">
{include file='system_message.tpl'}
{hook run='content_begin'}

4
templates/skin/default/js/template.js
View file

@ -22,6 +22,10 @@ jQuery(document).ready(function($){
}
// Модальные окна
$('.modal').jqm({trigger: 'a.modal-test'});
// Хук конца инициализации javascript-составляющих шаблона
ls.hook.run('ls_template_init_end',[],window);
});

16
templates/skin/default/modal_test.tpl Normal file
View file

@ -0,0 +1,16 @@
<div class="modal">
<header class="modal-header">
<h3>Test</h3>
<a href="#" class="close jqmClose">✖</a>
</header>
<div class="modal-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

1
templates/skin/default/settings/config/config.php
View file

@ -8,6 +8,7 @@ $config['head']['default']['js'][] = '___path.static.skin___/js/template.js';
$config['head']['default']['css'] = array(
"___path.static.skin___/css/reset.css",
"___path.static.skin___/css/main.css",
"___path.static.skin___/css/modals.css",
);