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_modal,
.x_modal-backdrop{display:none}
.x_modal{width:90%;margin-left:-45%}
/* Custom Styles */
.x .section{margin:20px 0}
.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_modal,
.x_modal-backdrop{display:none}
.x_modal{width:90%;margin-left:-45%}
/* Custom Styles */
.x .section{margin:20px 0}
.x .section>h1{position:relative}

View file

@ -6,7 +6,7 @@ jQuery(function($){
$('.x .skipNav>a').click(function(){
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
});
/*
// TARGET toggle
$('.x [data-toggle]').click(function(){
$($(this).attr('data-toggle')).toggle();
@ -22,7 +22,7 @@ jQuery(function($){
$($(this).attr('data-hide')).hide();
return false;
});
*/
// Tab Navigation
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
@ -145,15 +145,38 @@ jQuery(function($){
$(this).parent().hide();
});
// Modal Window
/*var $modal = $('.x_modal');
var $modal = $('.x_modal');
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 $bg = $('.x_modal-backdrop');
if($($this.attr('href')).hasClass('x_modal')){
$bg.show();
$this.attr('data-hide', '#' + $this.parent().attr('id'));
});
// 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(){
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
});
/*
// TARGET toggle
$('.x [data-toggle]').click(function(){
$($(this).attr('data-toggle')).toggle();
@ -22,7 +22,7 @@ jQuery(function($){
$($(this).attr('data-hide')).hide();
return false;
});
*/
// Tab Navigation
$('.x .x_tab-content>.x_tab-pane:not(".x_active")').hide();
$('.x .x_nav-tabs').find('>li>a[href^="#"]').click(function(){
@ -145,15 +145,38 @@ jQuery(function($){
$(this).parent().hide();
});
// Modal Window
/*var $modal = $('.x_modal');
var $modal = $('.x_modal');
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 $bg = $('.x_modal-backdrop');
if($($this.attr('href')).hasClass('x_modal')){
$bg.show();
$this.attr('data-hide', '#' + $this.parent().attr('id'));
});
// 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();
}
});
});