使用对话框不起作用

Question

我在对话框中遇到了一个小问题。由于某种原因，当我使用我的按钮alert时，我无法打开它，该按钮调用函数openAlert()设置了我的 msg变量为1，这是为了使对话框打开。但是由于某种原因，它行不通。

如果有人知道为什么这样，那将非常有帮助。预先感谢。

var addOpen;
var msg;
function open_Add_Menu() {
  if (addOpen == false) {
    document.getElementById("new_org").className = "open";
    document.getElementById("btn_new_org").innerHTML = "Cancel";
    addOpen = true;
  } else {
    document.getElementById("new_org").className = "new_org";
    document.getElementById("btn_new_org").innerHTML = "Add New Organisation";
    addOpen = false;
  }
}
function openAlert() {
  var msg = 1;
}
$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });
  if (msg == '1') {
    $("#dialog1").dialog("open");
  }
  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });
});

.org_container {
  width: 20%;
  margin: 15px 6.25% 6.25% 0px;
  border: 2px solid #e1dfe1;
  border-radius: 15px;
  display: inline-block;
}
.org_container_active {
  width: 20%;
  margin: 15px 6.25% 6.25% 0px;
  border: 2px solid #2bbe43;
  border-radius: 15px;
  display: inline-block;
}
.org_name {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #e1dfe1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #f5f0f5;
  text-align: center;
  font-weight: bold;
}
.org_logo {
  width: 100px;
  margin: auto;
  padding: 10px 0px 0px 0px;
}
.org_info {
  padding: 5px 10px 10px 5px;
}
.btnAdd {
  width: 160px;
  height: 30px;
  float: right;
  margin: 0px 30px 0px 0px;
  background-color: #2f8fcb;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
}
.btnSubmit {
  width: 160px;
  height: 30px;
  float: left;
  margin: 20px 0px 0px 0px;
  background-color: #2f8fcb;
  border: 2px solid #2f8fcb;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
}
#new_org {
  width: 50%;
  height: 0;
  margin: 30px 45% 10px 5%;
  transition: height 1s;
  overflow: hidden;
}
#new_org.open {
  height: 430px;
}
#btnAdd {
  padding: 20px 0px 0px 0px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="alert!">
  <p>my alert body.</p>
</div>
<div id="btnAdd">
  <button class="btnAdd" id="btn_new_org" onclick="open_Add_Menu()">Add New Organisation</button>
</div>
<form action="client_org_test.php" method="post">
  <div id="new_org">
    <div id="new_org_name">
      <p>New Orgacnisation Name: *</p>
      <input type="text" name="new_org_name_tb" id="new_org_name_tb" autocomplete="off" required>
    </div>
    <div id="new_org_add1">
      <p>New Organisation Address Line 1: *</p>
      <input type="text" name="new_org_add1_tb" id="new_org_add1_tb" autocomplete="off" required>
    </div>
    <div id="new_org_add2">
      <p>New Organisation Address Line 2:</p>
      <input type="text" name="new_org_add2_tb" id="new_org_add2_tb" autocomplete="off">
    </div>
    <div id="new_org_add3">
      <p>New Organisation Address Line 3:</p>
      <input type="text" name="new_org_add3_tb" id="new_org_add3_tb" autocomplete="off">
    </div>
    <div id="new_org_post">
      <p>New Organisation Postcode: *</p>
      <input type="text" name="new_org_post_tb" id="new_org_post_tb" autocomplete="off" required>
    </div>
    <div id="new_org_number">
      <p>New Organisation Main Contact Number: *</p>
      <input type="text" name="new_org_number_tb" id="new_org_number_tb" autocomplete="off" required>
    </div>
    <button class="btnSubmit" onclick="">Add</button>
  </div>
</form>
<button class="btnSubmit" onclick="openAlert()">Alert</button>

Answer 1

您没有将全局msg设置为1。在openAlert中，您正在创建一个新的msg变量，并且永远不会使用它。如果要更改全局一个，则不要使用var关键字，因为这将创建一个对包含函数的新变量。

实际上，您的openAlert 根本没有做任何事情。即使更改正确的变量也不会神奇地调用其他代码。 if (msg == '1')仅运行一次，完全永远是不正确的。

单击通过使用事件听众来调用实际代码的唯一(SANE(，就像您已经使用jQuery：

$("#opener").on("click", function() {
  $("#dialog1").dialog("open");
});

奇怪的是，您的HTML不包含ID opener的任何元素。

那么为什么不尝试？

$("#alertButton").on("click", function(){ // Instead of `#opener`.
  $("#dialog1").dialog("open");
});
// You could also try `$("#alertButton, #opener")`.

<button id="alertButton" class="btnSubmit">Alert</button>

我看不到msg在这里对您有何帮助，但是如果您想控制何时通过此变量显示对话框，那么您可以尝试以下操作：

$("#alertButton").on("click", function() {
  if(msg == 1){
    $("#dialog1").dialog("open");
  }
});

使用正确的类型开始：您将msg定义为数字1，但对字符串"1"进行检查。

不要使用诸如onclick之类的内联事件属性。而是使用jQuery的$(…).on或标准addEventListener。