显示和隐藏元素（jquery / javascript）

Question

我有一个模态，但是我不想显示它，除非它结束了所有验证。

因此，我是否想一开始就将其隐藏起来，并在验证过程中将其显示出来。

单击btnSubmit时，我的代码仍显示模式

 $('#btnSubmit').click(function(e) { e.preventDefault(); $('#creationModal').modal('hide'); //if the flow is not validated var flowName = $('#flowName').val(); //check if it exists validateFlowName(flowName); }); function validateFlowName(flowName) { if //some validation processes) { } //if passes all validations, show it else { $('#creationModal').modal('show'); } 

 <button type="submit" class="btn btn-rounded btn-success-outline top10" data-target="#creationModal" data-toggle="modal" id="btnSubmit"><span class="fa fa-plus"></span> Create</button> 

Answer 1

尝试从按钮中删除data-target =“＃creationModal” data-toggle =“ modal”：

<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Answer 2

从您的按钮中删除data-target="#creationModal" data-toggle="modal"代码行，因为此行将打开modal。 如果要直接打开模式，则需要上面的行。

<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Answer 3

加载页面时，那时$('#creationModal').hide()将隐藏您的元素，然后单击按钮$('#btnSubmit').click(function(e)将调用。在此函数中您可以检查这种情况：

$('#creationModal').hide();

$('#btnSubmit').click(function(e) {
  e.preventDefault();
  //if the flow is not validated
  var flowName = $('#flowName').val();
  //check if it exists
  if(flowName) {
    $('#creationModal').show();
  }
  else {
    $('#creationModal').hide();
  }
});