弹出覆盖字段
问题描述:
我有选择一些信息的ajax脚本。 如果用户选择一个选项,则会弹出一个请求允许用户覆盖地址组件字段的弹出窗口。如果字段为空,则应显示该消息。 我想知道如何做这个确认弹出?弹出覆盖字段
HTML:
<html>
[..]
<div style="width:54.5%;float:right;">
<h2 class="basic"><fmt:message key="fiscalite.administration.listeRejets.label.proprietaire"/></h2>
<table border="1">
<tr style="height:20px;width:250px;border:0">
<td class="labelChamp" style="border:0">
<fmt:message key="fiscalite.administration.listeRejets.label.nomProprietaire"/>
<span class="champsObligatoire">*</span>
</td>
<td style="border:0">
<html:text property="rejet.immeuble.SCIProprietaire" size="40" maxlength="40" styleId="nomProprietaire" styleClass="champsBleu02" onkeyup="couleur(this)"/>
</td>
</tr>
<tr style="height:20px;border:0">
<td class="labelChamp" style="border:0">
<fmt:message key="fiscalite.administration.listeRejets.label.SIRENProprietaire"/>
<span class="champsObligatoire">*</span>
</td>
<td style="border:0">
<html:text property="rejet.SIRENProprietaire" styleId="siren" size="9" maxlength="9" styleClass="champsBleu03" tabindex="8" onkeyup="initFlagSelectionSiren();couleur(this);" />
<div id="autoCompletionListeProprietaireImmeuble" class="autocomplete" style="display:none;"></div>
</td>
</tr>
<tr style="border:0">
<td style="border:0"></td>
<td style="border:0">
<div style="display:none;" id="imageAttente" align="center" class="autocomplete"><img src="media/ajax/indicator_waitanim.gif" width="65"/></div>
</td>
</tr>
<tr style="height:20px;border:0">
<td class="labelChamp" style="border:0">
<fmt:message key="fiscalite.administration.listeRejets.label.numEtNomVoie"/>
<span class="champsObligatoire">*</span>
</td>
<td style="border:0">
<html:text property="rejet.voieProprietaire" styleId="adresse" size="32" maxlength="32" styleClass="champsBleu02" onkeyup="couleur(this)"/>
</td>
</tr>
<tr style="height:20px;border:0">
<td class="labelChamp" style="border:0">
<fmt:message key="fiscalite.administration.listeRejets.label.cPostalEtVille"/>
<span class="champsObligatoire">*</span>
</td>
<td style="border:0">
<html:text property="rejet.communeProprietaire" styleId="ville" size="32" maxlength="32" styleClass="champsBleu02" onkeyup="couleur(this)"/>
</td>
</tr>
</table>
</div>
</html>
我的脚本
<script type="text/javascript">
var sirenSelectionne = false;
var objProprietaireAutoComp = null;
if(document.getElementById('siren') != null)
{
function majChampsSiren(el)
{
if(el.getElementsByTagName('span')[0] == null){
var siren = document.getElementById('siren');
if(el.getElementsByTagName('div')[0].id != "erreurSiren")
{
siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue;
var nomProprietaire = document.getElementById('nomProprietaire');
nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue;
var adresse = document.getElementById('adresse');
adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue;
var ville = document.getElementById('ville');
ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue;
sirenSelectionne = true;
}
else
{
sirenSelectionne = false;
fermerPopupProprietaire();
}
}
}
objProprietaireAutoComp = new Ajax.Autocompleter ('siren',
{
method: 'post',
paramName: 'autoCompletion',
indicator : 'imageAttente',
minChars: 4,
updateElement: majChampsSiren
});
}
--RESOLVED--最终结果
<script type="text/javascript">
//////////////////////////////////////
// Gestion de l'auto-complétion avec traitement en retour sur siren
var sirenSelectionne = false;
var objProprietaireAutoComp = null;
if(document.getElementById('siren') != null) {
function majChampsSiren(el) {
var siren = document.getElementById('siren');
var nomProprietaire = document.getElementById('nomProprietaire');
var adresse = document.getElementById('adresse');
var ville = document.getElementById('ville');
var message = 'Les champs:\n-Nom du propriétaire\n-Numéro et nom de voie\n-Code postal et Commune\nvont être remplacé par ceux du propriétaire sélectionné.\nConfirmez vous ce remplacemnt ?';
if(nomProprietaire.value !="" || adresse.value !="" || ville.value != "")
{
top.Dialog.confirm("<p class='corps12 coulBleu02'>" + message + "</p><br/>", {
id:'idPopupSIREN',
className: "bloquant",
width:200,
height:150,
buttonClass: "boutonbleu",
closable: true,
maximizable: false,
minimizable: false,
showEffectOptions: {duration:0.2},
hideEffectOptions: {duration:0.2},
destroyOnClose: true,
cancel:function(win) {},
ok:function(win)
{
if(el.getElementsByTagName('span')[0] == null)
{
if(el.getElementsByTagName('div')[0].id != "erreurSiren")
{
siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue;
nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue;
adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue;
ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue;
sirenSelectionne = true;
top.Windows.close('idPopupSIREN');
}
else
{
sirenSelectionne = false;
fermerPopupProprietaire();
}
}
},
zindex: 2000
});
}
else
{
if(el.getElementsByTagName('span')[0] == null)
{
if(el.getElementsByTagName('div')[0].id != "erreurSiren")
{
siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue;
nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue;
adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue;
ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue;
sirenSelectionne = true;
}
else
{
sirenSelectionne = false;
fermerPopupProprietaire();
}
}
}
}
objProprietaireAutoComp = new Ajax.Autocompleter ('siren',
'autoCompletionListeProprietaireImmeuble',
'ajax/ajaxAutocompleterProprietaireImmeuble.do',
{
method: 'post',
paramName: 'autoCompletion',
indicator : 'imageAttente',
minChars: 4,
updateElement: majChampsSiren
});
}
</script>
答
使用confirm()
函数。
if (confirm('Are you sure?')) {
// User has clicked OK, do your business thing.
} else {
// User has clicked Cancel, take your alternative path, if any.
}
好的,但我怎样才能使用确认与我的CSS设计。 – Mercer 2010-08-30 11:41:57
那么,只需使用绝对定位的div,而不是切换显示块/无。 – BalusC 2010-08-30 11:50:46