javascript - divの外側をクリックして別のdivを表示/非表示

Question

3 つの異なるモーダル ボックスで 3 つの異なるリンクを作成することは可能ですか? これが私の例です：

<ul class="menu">
    <li><a class="link" href="#">link1</a>
        <div id="layer">
            <p>text 11</p>
        </div>
    </li>
    <li><a class="link" href="#">link2</a>
        <div id="layer">
            <p>text 2</p>
        </div>
    </li>
    <li><a class="link" href="#">link3</a>
        <div id="layer">
            <p>text3</p>
        </div>
    </li>
</ul>

...JS を使用:

$(function () {    
    $('#layer').hide();
    $('.link').click(function (e) {
      var $message = $('#layer');

      if ($message.css('display') != 'block') {
        $message.show();

        var yourClick = true;
        $(document).bind('click.myEvent', function (e) {
          if (!yourClick && $(e.target).closest('#layer').length == 0) {
            $message.hide();
            $(document).unbind('click.myEvent');
          }
          yourClick = false;
        });
      }

      e.preventDefault();
    });
  });

http://jsfiddle.net/innpe/xbJ6u/1/

ただし、3 つの異なるリンクには同じテキストが表示されます (最初のリンク)。問題は理解できますが、1 つの関数でそれを実現する方法がわかりません。