Javascript et css

victoria ghabri Messages postés 114 Statut Membre -  
victoria ghabri Messages postés 114 Statut Membre -
Bonjour,

Je doit afficher un dialogue box suivant le cas ,si par exemple d<1.5 ,un dialogue box s'affiche avec un message "good address" ,si nn un autre dialogue box s'affiche avec un message "bad address" et avec des boutons aynats des fonctionallites differentes.
Mon probleme ,c'est que je n'arrive pas a faire un lien entre le message et son dialogue box.

voilq le code un peut long : et merci pour votre aide


<script>

var clickedid=0;
//Dialogue box for good address
$(document).ready(function () {

// if user clicked on button, the overlay layer or the dialogbox, close the dialog
$('#CancelButton').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});


$('#oKButton').click(function () {

//var actionUrl= window.location;
window.location = adressloc;
//alert(adressloc);

$('#dialog-overlay, #dialog-box').hide();

return false;
});

// if user resize the window, call the same function again
// to make sure the overlay fills the screen and dialogbox aligned to center
$(window).resize(function () {

//only do it if the dialog box is not hidden
if (!$('#dialog-box').is(':hidden')) popup1();
});

});
//END Dialogue box for good address

//Dialogue box for bad address
var clickedid=0;
$(document).ready(function () {

// if user clicked on button, the overlay layer or the dialogbox, close the dialog
$('#oKButton1').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});

// if user resize the window, call the same function again
// to make sure the overlay fills the screen and dialogbox aligned to center
$(window).resize(function () {

//only do it if the dialog box is not hidden
if (!$('#dialog-box').is(':hidden')) popup1();
});

});

function popup1(ID,lat1,lon1)
{ ......

d=5;
if (d<1.5)
{
// alert("You are in the good address ");
//Amina Dialogue box
message='You are in the good addres';
var maskHeight = $(window).height();
var maskWidth = $(window).width();

// calculate the values for center alignment
// calculate the values for center alignment
var dialogTop = (maskHeight - $('#dialog-box').height())/2;
var dialogLeft = (maskWidth - $('#dialog-box').width())/2;

// assign values to the overlay and dialog box
$('#dialog-overlay').css({ height:$(document).height(), width:$(document).width() }).show();
$('#dialog-box').css({ top: dialogTop, left: dialogLeft}).show();

// display the message
$('#dialog-message').html(message);
//END Amina Dialogue box
// window.location = adressloc;

}
else
{
// alert ("Bad Address");
message='Bad Address';
}
// get the screen height and width
var maskHeight = $(window).height();
var maskWidth = $(window).width();

// calculate the values for center alignment
// calculate the values for center alignment
var dialogTop = (maskHeight - $('#dialog-box').height())/2;
var dialogLeft = (maskWidth - $('#dialog-box').width())/2;

// assign values to the overlay and dialog box
$('#dialog-overlay').css({ height:$(document).height(), width:$(document).width() }).show();
$('#dialog-box').css({ top: dialogTop, left: dialogLeft}).show();

// display the message
$('#dialog-message').html(message);
//END Amina Dialogue box
// window.location = adressloc;


}
});

}); //geolcation
}

}



<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<table style="width:100%">
<tr>
<td align="center">
<img src="<?php echo $this->baseUrl() ?>/question1.png">   <span id="dialog-message"></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<a href="#" class="button" id="oKButton">ok</a>
<a href="#" class="button" id="CancelButton">Cancel</a>
</td>
</tr>
</table>

</div>
</div>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<table style="width:100%">
<tr>
<td align="center">
<img src="<?php echo $this->baseUrl() ?>/question1.png">   <span id="dialog-message"></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<a href="#" class="button" id="oKButton1">ok</a>

</td>
</tr>
</table>

</div>
</div>

2 réponses

Utilisateur anonyme
 
Bonjour, vous utilisez jquery car vous souhaitez absolument un effet sur la dialogue box ?
0
victoria ghabri Messages postés 114 Statut Membre 5
 
Bonjour
merci a vous ,j'ai resolu le probleme ,il y avait quelques fautes d'innatention :tel que une accaulade ,et quelque erreurs au niveau du CSS.
0