我需要在请求后分别确认几个字段。用户需要在新值或旧值之间做出选择。模态正在更新输入以覆盖文本,并且不等待确认。它仅在最后一个事件中显示,然后将确认答案设置为所有其他事件。我的研究没有发现太多帮助,也不知道如何解决。
var modalConfirm = function(callback) {
$("#gti-modal-btn-yes").click(function() {
callback(true);
$("#gti-modal").hide();
});
$("#gti-modal-btn-no").click(function() {
callback(false);
$("#gti-modal").hide();
});
$("#gti-modal-btn-close").click(function() {
callback(false);
$("#gti-modal").hide();
});
}
function modalAsk(msg, oldVal, newVal) {
$('.modal').appendTo($('body'));
$("#gti-modal-msg")[0].innerHTML = "<h3>" + msg + "</h3>";
$("#gti-modal").show();
modalConfirm(function(confirm) {
if (confirm) {
oldVal = newVal
alert('Change')
} else {
alert('No Change')
}
});
}
function funConfirmFields(fieldName, oldVal, newVal) {
if (newVal !== "") {
if (newVal !== oldVal) {
if (modalAsk('Warning!</br>Field: " ' + fieldName.toUpperCase() + '"</br>Old value: ' + oldVal + '</br>New values: ' + newVal + '</br></br>Change to New Value?')) {
newVal = oldVal
}
}
} else {
newVal = oldVal;
}
return newVal
}
$(document).ready(function() {
$("#txtName")[0].value = funConfirmFields('Name', $("#txtName")[0].value, "b",);
$("#txtDoc")[0].value = funConfirmFields('Doc', $("#txtDoc")[0].value, "2222");
$("#txtCell")[0].value = funConfirmFields('Cell', $("#txtCell")[0].value, "456");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="gti-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p id="gti-modal-titulo" class="modal-title"><i class='fa fa-question-circle pull-rigth '></i> MyModal </p>
</div>
<div id="gti-modal-msg" class="modal-body"></div>
<div class="modal-footer">
<button id="gti-modal-btn-yes" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">yes</button>
<button id="gti-modal-btn-no" type="button" class="btn btn-primary">No</button>
</div>
</div>
</div>
</div>
<input class="form-control" type="text" id="txtName" name="txtName" value="a"/>
<input class="form-control" type="text" id="txtDoc" name="txtDoc" value= "111"/>
<input class="form-control" type="text" id="txtCell" name="txtCell" value= "123"/>
我认为bootstrap-modal
的行为不像confirm Window
,所以我可以转到jquery confirm,但我更喜欢像answer这样动态地构建它。>
这是我的结果:
function addModal( id, msg, callback) { html = '<div id="gti-modal-'+id+'" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">'; html += '<div class="modal-dialog">'; html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'; html += '<h3 id="gti-modal-title" class="modal-title"><i class="fa fa-exclamation-triangle pull-rigth"></i> GTI</h3>'; html += '</div>'; html += '<div class="modal-body">'; html += '<h4>'+msg+'</h4>' html += '</div>'; html += '<div class="modal-footer">'; html += '<button id="gti-modal-btn-yes-'+id+'" type="button" class="btn btn-default">Yes</button>'; html += '<button id="gti-modal-btn-no-'+id+'"type="button" class="btn btn-primary">No</button>'; html += '</div>'; // content html += '</div>'; // dialog html += '</div>'; // footer html += '</div>'; // modalWindow $('body').append(html); $("#gti-modal-"+id).show(); $("#gti-modal-"+id).on('hidden.bs.modal', function (e) { $(this).remove(); }); $("#gti-modal-btn-yes-"+id).click(function () { callback(true); $("#gti-modal-"+id).hide(); }); $("#gti-modal-btn-no-"+id).click(function () { callback(false); $("#gti-modal-"+id).hide(); }); $("#gti-modal-btn-close-").click(function () { callback(false); $("#gti-modal-"+id).hide(); }); } function askModal(id, msg, inputFiel, newValue) { addModal(id, msg, function (confirm) { inputFiel.val(confirm ? newValue : inputFiel.val()); }); } function funConfirmField(id, inputFiel, newValue) { if (newValue !== "" && (newValue !== inputFiel.val())) { askModal(id, 'Warning!</br>Field: '+id.toUpperCase() + '</br>New Value: ' + newValue + '</br>Old Value: ' + inputFiel.val() + '</br></br>Change to New Value?', inputFiel, newValue); } } $(document).ready(function () { funConfirmField('Name', $('#name'), 'jonh'); funConfirmField('Doc', $('#doc'), '222'); funConfirmField('Cell', $('#cell'), '508'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <input class="form-control" type="text" id="name" name="name" value="Mark"/> <input class="form-control" type="text" id="doc" name="doc" value= "111"/> <input class="form-control" type="text" id="cell" name="cell" value= "617"/>