单击按钮时显示模式引导程序

Question

我的代码有问题。如果我点击按钮搜索在我的表单，当一个字段有输入，我得到按钮搜索与弹出在同一时间。

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

代码html在以下链接中:https://jsfidle.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类之后使用空格。

$(".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');
});