Cacher is the code snippet organizer for pro developers

<div class="audio_wrap">
  <div class="inner">
    <div class="audio_button">Sound Play / Off</div>
    <audio id="audio" src="http://amachamusic.chagasi.com/mp3/arabiantechno.mp3" loop>
    あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  </audio>
  </div>
</div>

<h1>Welcome &amp;&amp; My Disital Design</h1>

<div class="d3"></div>

<div class="cont">
  <ul>
    <li>My Works</li>
    <li>About</li>
    <li><a href="">More</a></li>
    <li>
      <a href="#" class="btn btn-primary btn-lg btnOpen">ウィンドウを表示</a>
    </li>
  </ul>
</div>

<div class="windowBg">
  <div class="windowBody well">
    <p><a href="http://www.tam-tam.co.jp/tipsnote/" target="_blank">外部サイトへのリンク</a></p>
    <p>背景をクリックしても閉じます</p>
  </div>
  
  <div class="btnClose">x Close</div>
  
</div>

<!-- https://git.io/vpplg -->

jQuery(function($){
  $('.btnOpen').click(function(){
    
    $(".cont").hide();
    
    $('.windowBg').show();return false;
  });
  
  $('.windowBg').click(function() {
    $(".cont").show();
    $('.windowBg').hide();return false;

  });
  
  $('.windowBody').click(function(event){
    // これがないとモーダル自身のクリックでも閉じてしまう。
    // hideの解除機能。親要素からの独立化。
    event.stopPropagation();
  });
    
  $('.btnClose').click(function(event){
    $(".cont").show();
    event.preventDefault();
  });                  
});


// Sound
$(function() {
  var audioBtn = $(".audio_button"),
    audioWrap = $(".audio_wrap"),
    audio = document.getElementById("audio");

  audioBtn.on("click", function() {
    if (audioWrap.hasClass("play")) {
      audio.pause();
      audioWrap.removeClass("play");
    } else {
      audio.play();
      audioWrap.addClass("play");
    }
  });
});


// var width = Math.max(960, innerWidth),
//     height = Math.max(800, innerHeight);

var width = innerWidth,
  height = innerHeight;

var x1 = width / 2,
  y1 = height / 2,
  x0 = x1,
  y0 = y1,
  i = 0,
  r = 400,
  τ = 2 * Math.PI;

var canvas = d3
  .select(".d3")
  .append("canvas")
  .attr("width", width)
  .attr("height", height)
  .on("ontouchstart" in document ? "touchmove" : "mousemove", move);

var context = canvas.node().getContext("2d");
context.globalCompositeOperation = "lighter";
context.lineWidth = 1.5;

d3.timer(function() {
  context.clearRect(0, 0, width, height);

  var z = d3.hsl(++i % 360, 1, 0.5).rgb(),
    c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
    x = (x0 += (x1 - x0) * 0.1),
    y = (y0 += (y1 - y0) * 0.1);

  d3
    .select({})
    .transition()
    .duration(5000)
    .ease(Math.sqrt)
    .tween("circle", function() {
      return function(t) {
        context.strokeStyle = c + (1 - t) + ")";
        context.beginPath();
        context.arc(x, y, r * t, 0, τ);
        context.stroke();
      };
    });
});

function move() {
  var mouse = d3.mouse(this);
  x1 = mouse[0];
  y1 = mouse[1];
  d3.event.preventDefault();
}

$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", innerWidth);
    chart.attr("height", innerHeighth);
}).trigger("resize");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #111;
  position: relative;
  font-family: "Poiret One", cursive;
  font-size: 24px;
  color: white;
}

a {
  color: white;
  text-decoration: none;
}

.d3 {
  margin: 0;
  background: #0f0f0f;
  min-width: 960px;
  min-height: 800px;
  height: 100%;
  width: 100vw;
}

h1,
.cont {
  color: white;
  text-align: center;
  // background-color: rgba(100, 100, 100, 0.1);
  width: 100vw;
  font-size: 32px;
}

h1 {
  position: absolute;
  top: 20%;
  padding: 1rem;
  font-size: 48px;
}

.cont {
  font-size: 2rem;
  padding: 0.5rem;
  position: absolute;
  bottom: 40%;
  z-index: 5;
}

.audio_wrap {
  // background: rgba(255, 228, 196, 0.1);
  position: absolute;
  text-align: center;
  width: 100vw;
  .inner {
    display: flex;
    justify-content: center;
    padding: 20px;
    .audio_button {
      width: auto;
      border: 1px solid #eee;
      padding: 3px;
      cursor: pointer;
    }
  }
}

// Modal

.windowBg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  color: gray;

  .windowBody {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    margin: 10% auto;
    background-color: #ccc;
    padding: 50px;
  }
  .btnClose{
    position: absolute;
    // top: 0;
    left: 0;
    right: 0;
    bottom: 80px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" />