[Résolu] Problème de positionement

Question

mikz92

17 May 2013 à 16:40

Bonjour à toutes et à tous,

Je vous explique mon problème.
Dans mon BackOffice, pour ajouter/modifier/supprimer quelque chose, je passe par un Popup écrite en Jquery/CSS. Jusque là, aucun problème. Je rencontre mon premier problème lors ce que je veut intégrer (dans la popup) un formulaire avec un DatePicker écrit en Javascript/CSS, le DatePicker s'affiche derriere la Popup et je n'arrive pas à régler ce problème. J'ai cherché à modifier le CSS "position: absolute" et rien n'y fait...

Je suis débutant en Jquery/CSS (je me débrouille pas mal en PHP mais pour le reste je suis une bille)...

Voiçi le codage de ma popup :

Partie CSS :

<style type="text/css">
  /*------------------POPUPS------------------------*/
	#fade {
		display: none;
		background: #000; 
		position: fixed; left: 0; top: 0;
		z-index: 10;
		width: 100%; height: 100%;
		opacity: .80;
		z-index: 9999;
	}
	.popup_block{
		display: none;
		background: #fff;
		padding: 20px; 	
		border: 20px solid #ddd;
		float: left;
		font-size: 1.2em;
		position: fixed;
		top: 25%; left: 50%;
		z-index: 99999;
		-webkit-box-shadow: 0px 0px 20px #000;
		-moz-box-shadow: 0px 0px 20px #000;
		box-shadow: 0px 0px 20px #000;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	img.btn_close {
		float: right; 
		margin: -55px -55px 0 0;
	}
	.popup p {
		padding: 5px 10px;
		margin: 5px 0;
	}
	/*--Making IE6 Understand Fixed Positioning--*/
	*html #fade {
		position: absolute;
	}
	*html .popup_block {
		position: absolute;
	}
	</style>

Partie Jquery :


<script>
$(document).ready(function(){
						   		   
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
				
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value

		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://bluestar-investment.com/OB/images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
		
		return false;
	});
	
	
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
		
		return false;
	});

	
});

</script>

Voici le codage de mon DatePicker (pas très joli mais très utile) :

Partie CSS :

<style type="text/css">
.ds_box {
		background-color: #FFF;
		border: 1px solid #000;
		position: absolute;
		z-index: 32767;
	}
	
	.ds_tbl {
		background-color: #FFF;
	}
	
	.ds_head {
		background-color: #333;
		color: #FFF;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2px;
	}
	
	.ds_subhead {
		background-color: #CCC;
		color: #000;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		width: 32px;
	}
	
	.ds_cell {
		background-color: #EEE;
		color: #000;
		font-size: 13px;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		padding: 5px;
		cursor: pointer;
	}
	
	.ds_cell:hover {
		background-color: #F3F3F3;
	} 
	</style>

Partie JavaScript (ce code s'ajoute après <body>) :

<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>

<script type="text/javascript">
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
function ds_getel(id) {
    return document.getElementById(id);
}
function ds_getleft(el) {
    var tmp = el.offsetLeft;
    el = el.offsetParent
    while(el) {
        tmp += el.offsetLeft;
        el = el.offsetParent;
    }
    return tmp;
}
function ds_gettop(el) {
    var tmp = el.offsetTop;
    el = el.offsetParent
    while(el) {
        tmp += el.offsetTop;
        el = el.offsetParent;
    }
    return tmp;
}
var ds_oe = ds_getel('ds_calclass');
var ds_ce = ds_getel('ds_conclass');
var ds_ob = ''; 
function ds_ob_clean() {
    ds_ob = '';
}
function ds_ob_flush() {
    ds_oe.innerHTML = ds_ob;
    ds_ob_clean();
}
function ds_echo(t) {
    ds_ob += t;
}
var ds_element; // Text Element...
var ds_monthnames = [
'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
]; // You can translate it for your language.
var ds_daynames = [
'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam'
]; // You can translate it for your language.
function ds_template_main_above(t) {
    return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
         + '<tr>'
         + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><button class="btn btn-primary"><i class="icon-fast-backward"></i></button></td>'
         + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><button class="btn btn-primary"><i class="icon-chevron-left"></i></button></td>'
         + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3"><button class="btn btn-danger">Fermer</button></td>'
         + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();"><button class="btn btn-primary"><i class="icon-chevron-right"></i></button></td>'
         + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();"><button class="btn btn-primary"><i class="icon-fast-forward"></i></button></td>'
         + '</tr>'
         + '<tr>'
         + '<td colspan="7" class="ds_head">' + t + '</td>'
         + '</tr>'
         + '<tr>';
}
function ds_template_day_row(t) {
    return '<td class="ds_subhead">' + t + '</td>';
}
function ds_template_new_week() {
    return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
    return '<td colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
    return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
}
function ds_template_main_below() {
    return '</tr>'
         + '</table>';
}
function ds_draw_calendar(m, y) {
    ds_ob_clean();
    ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
    for (i = 0; i < 7; i ++) {
        ds_echo (ds_template_day_row(ds_daynames[i]));
    }
    var ds_dc_date = new Date();
    ds_dc_date.setMonth(m - 1);
    ds_dc_date.setFullYear(y);
    ds_dc_date.setDate(1);
    if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
        days = 31;
    } else if (m == 4 || m == 6 || m == 9 || m == 11) {
        days = 30;
    } else {
        days = (y % 4 == 0) ? 29 : 28;
    }
    var first_day = ds_dc_date.getDay();
    var first_loop = 1;
    ds_echo (ds_template_new_week());
    if (first_day != 0) {
        ds_echo (ds_template_blank_cell(first_day));
    }
    var j = first_day;
    for (i = 0; i < days; i ++) {
        if (j == 0 && !first_loop) {
            ds_echo (ds_template_new_week());
        }
        ds_echo (ds_template_day(i + 1, m, y));
        first_loop = 0;
        j ++;
        j %= 7;
    }
    ds_echo (ds_template_main_below());
    ds_ob_flush();
    ds_ce.scrollIntoView();
}
function ds_sh(t) {
    ds_element = t;
    var ds_sh_date = new Date();
    ds_c_month = ds_sh_date.getMonth() + 1;
    ds_c_year = ds_sh_date.getFullYear();
    ds_draw_calendar(ds_c_month, ds_c_year);
    ds_ce.style.display = '';
    the_left = ds_getleft(t);
    the_top = ds_gettop(t) + t.offsetHeight;
    ds_ce.style.left = the_left + 'px';
    ds_ce.style.top = the_top + 'px';
    ds_ce.scrollIntoView();
}
function ds_hi() {
    ds_ce.style.display = 'none';
}
function ds_nm() {
    ds_c_month ++;
    if (ds_c_month > 12) {
        ds_c_month = 1; 
        ds_c_year++;
    }
    ds_draw_calendar(ds_c_month, ds_c_year);
}
function ds_pm() {
    ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
    if (ds_c_month < 1) {
        ds_c_month = 12; 
        ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
    }
    ds_draw_calendar(ds_c_month, ds_c_year);
}
function ds_ny() {
    ds_c_year++;
    ds_draw_calendar(ds_c_month, ds_c_year);
}
function ds_py() {
    ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
    ds_draw_calendar(ds_c_month, ds_c_year);
}
function ds_format_date(d, m, y) {
    m2 = '00' + m;
    m2 = m2.substr(m2.length - 2);
    d2 = '00' + d;
    d2 = d2.substr(d2.length - 2);
    return y + '-' + m2 + '-' + d2;
}
function ds_onclick(d, m, y) {
    ds_hi();
    if (typeof(ds_element.value) != 'undefined') {
        ds_element.value = ds_format_date(d, m, y);
    } else if (typeof(ds_element.innerHTML) != 'undefined') {
        ds_element.innerHTML = ds_format_date(d, m, y);
    } else {
        alert (ds_format_date(d, m, y));
    }
}
</script>

Et voici le résultat

AVANT (dans la popup lors ce que je clique sur le formulaire pour ouvr le datepicker :
http://bluestar-investment.com/avant.jpg

APRES (quand je ferme la popup :
http://bluestar-investment.com/apres.jpg [/i]

juliesunset

17 May 2013 à 17:19

Le pense que le problème ce situe au niveau des z-index dans ton css

#fade {
		...
		z-index: 10;
		...
		z-index: 9999;
	}
	.popup_block{
		...
		z-index: 99999;
		...
	}

Premièrement, enlever un des 2 z-index dans #fade.
Ensuite appliquer un z-index supérieur à celui de .popup_block à ton bloc datepiker

mikz92

21 May 2013 à 10:46

Ok, merci de ta réponse, j'essaie dans la matinée je te tiens au courant si ca fonctionne Smiley smile

mikz92

21 May 2013 à 10:51

Super ! ça fonctionne !
Le problème maintenant c'est qu'il ne s'affiche pas au niveau du formulaire mais tout en haut de la page ...

Je pense faire un margin-top ou quelque chose du genre... Tu vois quelque chose de mieux à faire ? (désolé je suis une vraie bille au niveau du CSS ... même si je sais que c'est pas bien compliqué, je manque beaucoup d’expérience Smiley confus

)

Pewel

21 May 2013 à 11:10

Applique ce bout de code sur ta div :



.taDiv {
    position: absolute; 
    width: 400px; 
    height: 400px;
    top:0; 
    bottom:0; 
    left:0; 
    right: 0; 
    margin: auto;
}

Bien sur, tu met la taille que tu veux etc. Cela va normalement la centrer au milieu de l'écran. Tu peux faire ça pour ton formulaire et ton calendrier, ce qui aura pour but d'afficher ton calendrier au milieu de ta div contenant ton formulaire, que tu mettes ton calendrier "à l'intérieur" de la div de ton formulaire ou non.

Ps : il y a plusieurs façon de centrer des divs, là n'est qu'une solution parmi d'autres
Modifié par Pewel (21 May 2013 - 11:12)

mikz92

21 May 2013 à 11:27

Ok, merci ! Tout est rentré dans l'ordre, je vous remercie pour votre aide ! Smiley smile

Sujet clos