(JS+HTML+CSS)オーバーレイに苦戦した

ウェブ上でよくあるオーバーレイをチョチョッと実装するはずだった．

結局うまくいったからよかったけど，こんなの何度もやり直す自分に喝．
でも，うまく行かなかった方はなぜダメなのかわからない．

うまくいったコードは以下．

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8" />

<style>
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #src {
        background-color: lightblue;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
    }
    #overlay {
        background-color: yellow;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        display: none;
    }
</style>

<script>
    var isDisplay = false;
    function toggle() {
      var src = document.getElementById("overlay");
      if (isDisplay) {
        src.style.display = "none";
        isDisplay = false;
      } else {
        src.style.display = "block";
        isDisplay = true;
      }
    }
</script>

</head>
<body>

<div id="src">
    <p>元画面</p>
    <input type="button" value="Open" onclick="toggle()" />
</div>

<div id="overlay">
    <br/>
    <p>オーバーレイ</p>
    <input type="button" value="Close" onclick="toggle()" />
</div>

</body>
</html>

うまくいかなかったコードのスクリプト部分が以下．

<script>
    function open() {
        var src = document.getElementById("overlay");
        src.style.display = "block";
    }
    function close() {
        var src = document.getElementById("overlay");
        src.style.display = "none";
    }
</script>

単純に「開く」，「閉じる」をしたかっただけなのだけれど．

HTMLとCSSもっとうまくなりたいなぁ