Question

我的代码有问题。如果我在一个字段有输入时单击表单中的按钮搜索，我会同时获得按钮搜索和弹出窗口。

但我只想在单击按钮搜索时显示弹出窗口。

代码 html 位于此链接中：https://jsfiddle.net/ge5zxmst/

ACC.multiLogin = {
  _autoload: [
    "inputField",
    "popUpModal"
  ],
  inputField: function() {
    var showHideButtonSearch = () => {
      let hasValue = false;
      
      $("#multiLogin-search input.text-input").each(function() {
        if ($(this).val()) {
          hasValue = true;
        }
      });
      
      if (hasValue === false) {
        $(".button-row [name=search]").hide();
      } else {
        $(".button-row [name=search]").show();
      }
    }
    
    // Check input values on key up
    $("#multiLogin-search input.text-input").keyup(function() {
      showHideButtonSearch();
    });

    //Hide button search on page load
    showHideButtonSearch();
  },
  popUpModal: function() {
    $(".button-row [name=search]").show().on("click", function() {
      $('.pop-outer').fadeIn('slow');
    });

    $(".close").on("click", function() {
      $('.pop-outer').fadeOut('slow');
    });
  },
}

.pop-outer {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pop-inner {
  background-color: #fff;
  width: 500px;
  height: 300%;
  padding: 25px;
  margin: 15% auto;
}

感谢您的帮助。

Answer 1

需要对脚本进行一些更正。不要在按钮类之后使用空格。

$(".button-row[name=search]")  <-- Correct
$(".button-row [name=search]") <-- Wrong

要显示弹出窗口，请使用如下脚本。

$(".button-row[name=search]").on("click", function() {
  $('.pop-outer').fadeIn('slow');
});

$("button.close").on("click", function() {
  $('.pop-outer').fadeOut('slow');
});

更新：

我已将弹出 html 从表单标签中移出并使用适当的属性标签来显示和隐藏模式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form id="multiLogin-search" class="d-none">
  <div class="column">
    <div class="text-input-wrap">
      <p> Customer number <p>
      <p> <input class="text-input" type="text" name="customerCode"  > <p>
    </div>
    <div class="text-input-wrap">
      <p> Country <p>
      <p> <input class="text-input" type="text" name="country"  > <p>

    </div>
    <div class="text-input-wrap">
      <p> Postal Code <p>

      <p> <input class="text-input" type="text" name="postalCode"  > <p>
    </div>
  </div>
  <div class="column">
    <div class="text-input-wrap">
      <p> Customer Name <p>
      <p> <input class="text-input" type="text" name="customerName" > <p>
    </div>
    <div class="text-input-wrap">
      <p> City <p>
      <p> <input class="text-input" type="text" name="city" > <p>
    </div>
    <div class="text-input-wrap">
      <p> Address <p>
      <p> <input class="text-input" type="text" name="address"><p>
    </div>
  </div>
  <div class="button-row">
    <button class="btn btn-black" type="button" name="search"  data-toggle="modal" data-target="#myModal"><spring:theme code="multilogin.search.button"/>Search</button>
  </div>
</form>
            
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="pop-inner">
          <h2>This is an example of modal Boostrap</h2>
          <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.
            This is Bootstraps first-class API and should be your first consideration when using a plugin.</p>
        </div>
      </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>

单击按钮时显示模态 Boostrap

1 个答案: