mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-05-08 19:42:15 +09:00
Issue 2443. Modal Window UI created.
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11501 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
parent
0eeb8fd898
commit
62ae577e2b
4 changed files with 66 additions and 18 deletions
|
|
@ -54,6 +54,7 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
||||||
.x input[type="search"]+.x_btn+.x_btn{line-height:20px;font-size:14px;padding:4px 14px}
|
.x input[type="search"]+.x_btn+.x_btn{line-height:20px;font-size:14px;padding:4px 14px}
|
||||||
.x_modal,
|
.x_modal,
|
||||||
.x_modal-backdrop{display:none}
|
.x_modal-backdrop{display:none}
|
||||||
|
.x_modal{width:90%;margin-left:-45%}
|
||||||
/* Custom Styles */
|
/* Custom Styles */
|
||||||
.x .section{margin:20px 0}
|
.x .section{margin:20px 0}
|
||||||
.x .section>h1{position:relative}
|
.x .section>h1{position:relative}
|
||||||
|
|
|
||||||
1
modules/admin/tpl/css/admin.min.css
vendored
1
modules/admin/tpl/css/admin.min.css
vendored
|
|
@ -54,6 +54,7 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
|
||||||
.x input[type="search"]+.x_btn+.x_btn{line-height:20px;font-size:14px;padding:4px 14px}
|
.x input[type="search"]+.x_btn+.x_btn{line-height:20px;font-size:14px;padding:4px 14px}
|
||||||
.x_modal,
|
.x_modal,
|
||||||
.x_modal-backdrop{display:none}
|
.x_modal-backdrop{display:none}
|
||||||
|
.x_modal{width:90%;margin-left:-45%}
|
||||||
/* Custom Styles */
|
/* Custom Styles */
|
||||||
.x .section{margin:20px 0}
|
.x .section{margin:20px 0}
|
||||||
.x .section>h1{position:relative}
|
.x .section>h1{position:relative}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ jQuery(function($){
|
||||||
$('.x .skipNav>a').click(function(){
|
$('.x .skipNav>a').click(function(){
|
||||||
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
|
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
|
||||||
});
|
});
|
||||||
/*
|
|
||||||
// TARGET toggle
|
// TARGET toggle
|
||||||
$('.x [data-toggle]').click(function(){
|
$('.x [data-toggle]').click(function(){
|
||||||
$($(this).attr('data-toggle')).toggle();
|
$($(this).attr('data-toggle')).toggle();
|
||||||
|
|
@ -22,7 +22,7 @@ jQuery(function($){
|
||||||
$($(this).attr('data-hide')).hide();
|
$($(this).attr('data-hide')).hide();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
*/
|
|
||||||
// Tab Navigation
|
// Tab Navigation
|
||||||
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
|
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
|
||||||
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
|
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
|
||||||
|
|
@ -145,15 +145,38 @@ jQuery(function($){
|
||||||
$(this).parent().hide();
|
$(this).parent().hide();
|
||||||
});
|
});
|
||||||
// Modal Window
|
// Modal Window
|
||||||
/*var $modal = $('.x_modal');
|
var $modal = $('.x_modal');
|
||||||
if($modal.length >= 1){
|
if($modal.length >= 1){
|
||||||
$('body').append('<div class="x_modal-backdrop"></div>').append($modal);
|
$('body').append('<div class="x_modal-backdrop"></div>').append($modal); // append background
|
||||||
|
$modal.prepend('<button type="button" class="x_close">×</button>'); // prepend close button
|
||||||
}
|
}
|
||||||
$('.x a').click(function(){
|
// Set close button 'data-hide' attribute
|
||||||
|
$modal.children('.x_close').each(function(){
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
var $bg = $('.x_modal-backdrop');
|
$this.attr('data-hide', '#' + $this.parent().attr('id'));
|
||||||
if($($this.attr('href')).hasClass('x_modal')){
|
});
|
||||||
$bg.show();
|
// Modal Open
|
||||||
}
|
var $modalBack = $('.x_modal-backdrop');
|
||||||
});*/
|
$('.x a').click(function(){
|
||||||
|
var $target = $($(this).attr('href'));
|
||||||
|
if($target.hasClass('x_modal')){
|
||||||
|
$modalBack.show();
|
||||||
|
$target.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Modal Close
|
||||||
|
function modalClose(){
|
||||||
|
$modal.hide();
|
||||||
|
$modalBack.hide();
|
||||||
|
}
|
||||||
|
$modalBack.click(modalClose); // $modalBack click
|
||||||
|
$(document).keydown(function(event){ // ESC keydown
|
||||||
|
if(event.keyCode != 27) return true;
|
||||||
|
return modalClose();
|
||||||
|
});
|
||||||
|
$('[data-hide]').click(function(){ // [data-hide] click
|
||||||
|
if($($(this).attr('data-hide')).hasClass('x_modal')){
|
||||||
|
modalClose();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
43
modules/admin/tpl/js/admin.min.js
vendored
43
modules/admin/tpl/js/admin.min.js
vendored
|
|
@ -6,7 +6,7 @@ jQuery(function($){
|
||||||
$('.x .skipNav>a').click(function(){
|
$('.x .skipNav>a').click(function(){
|
||||||
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
|
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
|
||||||
});
|
});
|
||||||
/*
|
|
||||||
// TARGET toggle
|
// TARGET toggle
|
||||||
$('.x [data-toggle]').click(function(){
|
$('.x [data-toggle]').click(function(){
|
||||||
$($(this).attr('data-toggle')).toggle();
|
$($(this).attr('data-toggle')).toggle();
|
||||||
|
|
@ -22,7 +22,7 @@ jQuery(function($){
|
||||||
$($(this).attr('data-hide')).hide();
|
$($(this).attr('data-hide')).hide();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
*/
|
|
||||||
// Tab Navigation
|
// Tab Navigation
|
||||||
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
|
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
|
||||||
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
|
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
|
||||||
|
|
@ -145,15 +145,38 @@ jQuery(function($){
|
||||||
$(this).parent().hide();
|
$(this).parent().hide();
|
||||||
});
|
});
|
||||||
// Modal Window
|
// Modal Window
|
||||||
/*var $modal = $('.x_modal');
|
var $modal = $('.x_modal');
|
||||||
if($modal.length >= 1){
|
if($modal.length >= 1){
|
||||||
$('body').append('<div class="x_modal-backdrop"></div>').append($modal);
|
$('body').append('<div class="x_modal-backdrop"></div>').append($modal); // append background
|
||||||
|
$modal.prepend('<button type="button" class="x_close">×</button>'); // prepend close button
|
||||||
}
|
}
|
||||||
$('.x a').click(function(){
|
// Set close button 'data-hide' attribute
|
||||||
|
$modal.children('.x_close').each(function(){
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
var $bg = $('.x_modal-backdrop');
|
$this.attr('data-hide', '#' + $this.parent().attr('id'));
|
||||||
if($($this.attr('href')).hasClass('x_modal')){
|
});
|
||||||
$bg.show();
|
// Modal Open
|
||||||
}
|
var $modalBack = $('.x_modal-backdrop');
|
||||||
});*/
|
$('.x a').click(function(){
|
||||||
|
var $target = $($(this).attr('href'));
|
||||||
|
if($target.hasClass('x_modal')){
|
||||||
|
$modalBack.show();
|
||||||
|
$target.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Modal Close
|
||||||
|
function modalClose(){
|
||||||
|
$modal.hide();
|
||||||
|
$modalBack.hide();
|
||||||
|
}
|
||||||
|
$modalBack.click(modalClose); // $modalBack click
|
||||||
|
$(document).keydown(function(event){ // ESC keydown
|
||||||
|
if(event.keyCode != 27) return true;
|
||||||
|
return modalClose();
|
||||||
|
});
|
||||||
|
$('[data-hide]').click(function(){ // [data-hide] click
|
||||||
|
if($($(this).attr('data-hide')).hasClass('x_modal')){
|
||||||
|
modalClose();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue