Make html links under the shadow not clickable

Question

I've inserted a modal in my HTML page. I'd like to make the header links not clickable while the modal is showing (screenshot here: http://prntscr.com/4gyn61 )

Here's my css:

 .modal {
  display: none;
  width: 600px;
  height: 800px;
  z-index: 999 !important; \\I use this to display it over the header.
  background: #fff;
  padding: 15px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  box-shadow: inset 0 20px 40px -20px #000; 
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
}

And the html of the modal:

<div id="ex1" style="display:none;">
    <p class="curr"> <?php include 'mypagewithtext.html'; ?></p>
  </div>

Anyone got an idea?

EDIT: Only the header.

Answer 1

I made a simple fiddle to show how to do it :

http://jsfiddle.net/o261o9gk/

My technique is to use a div overlay as shadow :

.overlay{
    position:fixed;
    top:0;
    left:0;
    background-color:black;
    width:100%;
    height:100%;
    opacity:0.4;
}

Basicaly, the fixed div get the click instead of the content of your page.