Question

我的对话有一个小问题。出于某种原因，当我使用我的按钮alert调用设置我的函数openAlert()时，我无法打开它 msg变量为1，这意味着要打开要打开的对话框。但由于某种原因，它不起作用。

如果有人知道为什么会这样，那将非常有帮助。提前谢谢。

＆＃13;

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");

  });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

事实上，您的openAlert 根本没有做任何事情。即使更改正确的变量也不会神奇地调用其他一些代码。 if (msg == '1')只运行一次，而且绝对不是真的。

通过单击调用实际代码的唯一（理智）方法是使用事件侦听器，就像您已经在使用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。

使用不起作用的对话框？

1 个答案: