【发布时间】：2015-01-28 13:42:02
【问题描述】：
我正在开发一个网站，其中有一部分我执行邮政编码查询，当我给出“TAB”或简单地单击该字段以通知数据到查询执行事件时（我正在执行我的 JavaScript我的输入框中的 onblur 事件中的代码）。但是，我需要在查询等待期间出现的“模态”屏幕或“警报”。
已经尝试使用下面的方法，但是我没有成功，不要在onblur事件中工作，而不是在onclick：
$ ('# BuscaCEP') modal ('show.');
$ ('# BuscaCEP') modal ('hide');.
有人会给小费吗？
我的通用密码：
<li class="fields">
<div class="field">
<div class="form-group">
<?php //inputbox to the query from the onblur ?>
<label for="zip" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?>
</label>
<div class="input-box input-box-bkg-lage-small">
<input type="text" name="postcode"
value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
title="<?php echo $this->__('Zip/Postal Code') ?>" id="zip"
onblur="consultacep(this.value)"
OnKeyPress="formatNumber('#####-###', this, event)" maxlength="9"
class="form-control validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>"/>
</div>
</div>
</div>
</li>
<script type="text/javascript">
//Javascript Code
function consultacep(cep) {
cep = cep.replace(/\D/g, "")
url = "http://cep.correiocontrol.com.br/" + cep + ".js"
s = document.createElement('script')
s.setAttribute('charset', 'utf-8')
s.src = url
document.querySelector('head').appendChild(s);
//where the the loading screen should be performed
$('#buscaCEP').modal('show');
}
function openWindow() {
$('#buscaCEP').open();
}
function correiocontrolcep(valor) {
if (valor.erro) {
alert('Cep não encontrado');
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('Street').value = valor.logradouro
document.getElementById('bairro').value = valor.bairro
document.getElementById('city').value = valor.localidade
document.getElementById("region_id").value = xmlhttp.responseText;
//where the the loading screen should be terminated
$('#buscaCEP').modal('hide');
}
}
var url = "<?php echo $this->getBaseUrl()?>";
xmlhttp.open("GET", url + "buscaUF.php?uf=" + valor.uf, true);
xmlhttp.send();
}
</script>
在 Leopoldo Negro 的帮助下，到达了以下情况：
模态屏幕：
<!-- Modal -->
<div class="modal fade" id="buscaCEP" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Loading...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
输入框：
<li class="fields">
<div class="field">
<div class="form-group">
<?php //começa o cep e dados região ?>
<label for="zip" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?>
</label>
<div class="input-box input-box-bkg-lage-small">
<input type="text" name="postcode"
value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
title="<?php echo $this->__('Zip/Postal Code') ?>" id="zip"
onblur="consultacep(this.value)"
OnKeyPress="formatNumber('#####-###', this, event)" maxlength="9"
class="form-control validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>"/>
</div>
</div>
</div>
</li>
调用事件：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="zip"]').blur(function(){
consultacep(this.value);
});
});
</script>
Javascript：
<script>
function consultacep(cep) {
cep = cep.replace(/\D/g, "")
url = "http://cep.correiocontrol.com.br/" + cep + ".js"
s = document.createElement('script')
s.setAttribute('charset', 'utf-8')
s.src = url
document.querySelector('head').appendChild(s);
$('#buscaCEP').modal('show');
}
function openWindow() {
$('#buscaCEP').open();
}
function correiocontrolcep(valor) {
if (valor.erro) {
alert('Cep não encontrado');
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('Street').value = valor.logradouro
document.getElementById('bairro').value = valor.bairro
document.getElementById('city').value = valor.localidade
/*document.getElementById('region_id').value=valor.uf*/
/*document.getElementById('uf').value=valor.uf*/
document.getElementById("region_id").value = xmlhttp.responseText;
//where the the loading screen should be performed
$('#buscaCEP').modal('hide');
}
}
var url = "<?php echo $this->getBaseUrl()?>";
xmlhttp.open("GET", url + "buscaUF.php?uf=" + valor.uf, true);
xmlhttp.send();
}
</script>
但仍然无法调出模态屏幕 =/
【问题讨论】：
标签： javascript jquery twitter-bootstrap modal-dialog alert