从下拉列表中打开模式以添加客户端

Question

链接到我昨天关于如何让选择器的值改变我的 javascript 的行为的帖子，我在打开模式窗口时遇到了麻烦。

这个想法是，如果从第一个下拉列表中选择“添加客户端”，而不是使用“项目”动态填充第二个下拉列表，则会弹出一个模式窗口以允许用户添加客户端。

我有 index3.php:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include 'dbconnect.php';
?>

<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

function fetch_select(val)
{   
  if (val != "add_client")
  {
    $.ajax({
     type: 'post',
     url: 'fetch_data.php',
     data: {
       get_option:val
     },
     success: function (response) {
      document.getElementById("projects").innerHTML=response; 
     } 
    });
  }
  else
  {
    //code to open modal below
    success: function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }
    //code to open modal above
  }
}
</script>

<?php
echo "<table>";
echo "<form action='index3.php method='post'>";
echo "<tr>";
echo "<td>";
    echo "<select name='client' id='client' onchange='fetch_select(this.value);'>"; 
    echo "<option>Name of Firm</option>"; 
    $select = mysqli_query($Verbinding,"SELECT client FROM clients GROUP by client");
    while ($row = mysqli_fetch_array($select)) 
        {
        echo '<option value="'.$row['client'].'">'.$row['client'].'</option>';
        }
    echo "<option value='add_client'>Add Client</option>";
    echo "</select>";
echo "</td>";
echo "<td>";
    echo "<select name='project' id='projects'>";
    echo "<option>Select Project</option>";             
    echo "</select>";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</form>";

echo "<div id='overlay'>";
    echo "<div>";
    echo "<p>Content of modal window.</p>";
    echo "</div>";
echo "</div>";

?>

样式表 modal.css 工作并通过 dbconnect.php 包含并包含：

modal.css

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

希望任何人都可以提供帮助，谢谢并致以诚挚的问候，保罗

Answer 1

success: function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

什么都不做。您将 ajax 调用的“成功”回调（它定义了一个选项，包含一个稍后运行的函数）与常规日常代码混淆了。

假设您的 modal 将其 id 定义为“overlay”，那么您可以这样做：

else
{
  //code to open modal below
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  //code to open modal above
}