mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-05 16:04:24 +03:00
Модальные окна
This commit is contained in:
parent
3fadd1ea85
commit
c1a397b97b
|
@ -1,5 +1,6 @@
|
||||||
{include file='header.tpl'}
|
{include file='header.tpl'}
|
||||||
|
|
||||||
index page
|
index page<br />
|
||||||
|
<a href="#" class="modal-test link-dotted">test modal window</a>
|
||||||
|
|
||||||
{include file='footer.tpl'}
|
{include file='footer.tpl'}
|
|
@ -15,6 +15,12 @@ h3 { font-size: 18px; line-height: 26px; margin-bottom: 10px; }
|
||||||
|
|
||||||
p { 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
|
/* Grid
|
||||||
---------------------------------------------------- */
|
---------------------------------------------------- */
|
||||||
|
@ -26,6 +32,8 @@ p { margin-bottom: 10px; }
|
||||||
#sidebar { float: left; width: 300px; }
|
#sidebar { float: left; width: 300px; }
|
||||||
#footer { padding: 10px; background: #f7f7f7; }
|
#footer { padding: 10px; background: #f7f7f7; }
|
||||||
|
|
||||||
|
#content.content-full-width { width: 880px; }
|
||||||
|
|
||||||
|
|
||||||
/* Footer
|
/* Footer
|
||||||
---------------------------------------------------- */
|
---------------------------------------------------- */
|
||||||
|
|
39
templates/skin/default/css/modals.css
Normal file
39
templates/skin/default/css/modals.css
Normal 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'); }
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -56,13 +56,14 @@
|
||||||
<body class="">
|
<body class="">
|
||||||
{hook run='body_begin'}
|
{hook run='body_begin'}
|
||||||
|
|
||||||
|
{include file='modal_test.tpl'}
|
||||||
|
|
||||||
<div id="container" class="{hook run='container_class'}">
|
<div id="container" class="{hook run='container_class'}">
|
||||||
{include file='header_top.tpl'}
|
{include file='header_top.tpl'}
|
||||||
{include file='nav.tpl'}
|
{include file='nav.tpl'}
|
||||||
|
|
||||||
<div id="wrapper" class="clearfix">
|
<div id="wrapper" class="clearfix">
|
||||||
<div id="content">
|
<div id="content" class="{if $noSidebar}content-full-width{/if}">
|
||||||
{include file='system_message.tpl'}
|
{include file='system_message.tpl'}
|
||||||
|
|
||||||
{hook run='content_begin'}
|
{hook run='content_begin'}
|
|
@ -22,6 +22,10 @@ jQuery(document).ready(function($){
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Модальные окна
|
||||||
|
$('.modal').jqm({trigger: 'a.modal-test'});
|
||||||
|
|
||||||
|
|
||||||
// Хук конца инициализации javascript-составляющих шаблона
|
// Хук конца инициализации javascript-составляющих шаблона
|
||||||
ls.hook.run('ls_template_init_end',[],window);
|
ls.hook.run('ls_template_init_end',[],window);
|
||||||
});
|
});
|
16
templates/skin/default/modal_test.tpl
Normal file
16
templates/skin/default/modal_test.tpl
Normal 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>
|
||||||
|
|
|
@ -8,6 +8,7 @@ $config['head']['default']['js'][] = '___path.static.skin___/js/template.js';
|
||||||
$config['head']['default']['css'] = array(
|
$config['head']['default']['css'] = array(
|
||||||
"___path.static.skin___/css/reset.css",
|
"___path.static.skin___/css/reset.css",
|
||||||
"___path.static.skin___/css/main.css",
|
"___path.static.skin___/css/main.css",
|
||||||
|
"___path.static.skin___/css/modals.css",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue