Pop Up atau Modal Tidak Tampil

Kenapa Pop Up atau modal saya tidak tampil saat di klik ya mastah? kalau diatas 536px tampil, tapi kalau dibawahnya tidak tampil, hanya ada bayangan hitamnya doang mastah.

Ini script html ane

<a href="#cari">Cari</a>
	<a href="#masuk">Masuk</a>

	<div class="modal" id="cari">
		<div class="modal-container">
			<p>Selamat Mencari</p>
			<a href="#">Tutup</a>
		</div>
	</div>
	<div class="modal" id="masuk">
		<div class="modal-container">
			<p>Silahkan Masuk</p>
			<a href="#">Tutup</a>
		</div>
	</div>

dan ini script css ane

@media screen and (max-width: 536px){
  li, a{
    float: none;
    height: auto;
    text-align: center;
  }

  .cari{
    display: none;
  }

  .modal-container{
    content: "";
    position: fixed;
    display: none;
    background-color: rgba(0,0,0,.8);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .modal:target:before{
  display: block;
  }

  .modal:target .modal-container{
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .modal:target .modal-container{
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}