クライアントを追加するドロップダウンリストからモーダルを開きます

Question

私の以前のポストにリンクして、セレクタの値を持つ方法について、私のjavascriptの動作を変更しました。私はモーダルウィンドウを開くのに問題があります。

考えられるのは、最初のドロップダウンリストから「クライアントを追加」を選択した場合、2番目のドロップダウンリストに「プロジェクト」を動的に追加するのではなく、モーダルウィンドウがポップアップしてクライアントを追加できるということです。

は私が持っている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>"; 

?> 

作品とdbconnect.phpを通じて含まれており、含まれていmodal.cssスタイルシート：

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は「オーバーレイ」と定義していると仮定すると、あなただけ行うことができます。

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