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:
ChanMyeong 2012-09-25 08:42:51 +00:00
parent 0eeb8fd898
commit 62ae577e2b
4 changed files with 66 additions and 18 deletions

View file

@ -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}

View file

@ -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}

View file

@ -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">&times;</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();
}
});
}); });

View file

@ -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">&times;</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();
}
});
}); });