如何使用模态确认多次更新输入

Question

我需要在请求后分别确认几个字段。用户需要在新值或旧值之间做出决定。模态正在更新覆盖文本的输入并且不等待确认。它仅在最后一个事件中显示，然后确认答案设置为所有其他事件。我没有在我的研究中找到太多帮助，我不知道如何解决它。

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"/>

Answer 1

我认为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"/>