Bootstrap Modal not working in ContextMenu

[sathyaprakash94]

Hi there,

I'm trying to open a bootstrap modal when click on the item inside contextMenu. But it fails to open modal.

The code is as appended below,

<div class="portlet-body">
  <div id="context" data-toggle="context" data-target="#context-menu">
    <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras.
      </p>
  </div>
  <!-- Your custom menu with dropdown-menu as default styling -->
  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li>
        <a data-target="#demographicmodal" data-toggle="modal">
          <i class="icon-user"></i> New User </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="icon-present"></i> New Event
          <span class="badge badge-success">4</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Modal Content -->
<div id="demographicmodal" class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <label data-dismiss="modal" onclick="reloadallergies()" class="fa fa-times pull-right"></label>
        </div>
      </div>
    </div>
  </div>
</div>

I could not able to figure out, why the modal is not working. Pls help me to solve this.