Question

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

这个想法是，如果＆＃34;添加客户端＆＃34;从第一个下拉列表中选择，而不是使用＆＃34; projects＆＃34;动态填充第二个下拉列表，弹出一个模式窗口以允许用户添加客户端。

我有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调用的“成功”回调（它定义了一个选项，包含一个稍后运行的函数）和常规日常代码。

假设你的模态的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
}

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

1 个答案: