title: How to display modal instead of alert
body: <p>This is the modal pop-up I want to show when a user selects on a button and he is not logged in. </p>
  
  <pre><code> &lt;!--You must be logged in--&gt;
          &lt;div class="modal fade" id="must-be-logged-in" tabindex="-1" role="dialog" aria-labelledby="Log-In" aria-hidden="true"&gt;
              &lt;div class="modal-dialog modal-sm"&gt;
  
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="Login"&gt;Delete Account&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;form action="@Url.Action("Register","Home")" method="post"&gt;
                              &lt;label for="confirm"&gt;Tour could not be added to Wishlist. Please make sure that you are logged in.&lt;/label&gt;
                              &lt;p class="text-center"&gt;
                                  &lt;button class="btn btn-template-main"&gt;&lt;i class="fa fa-user-times"&gt;&lt;/i&gt;Log-In&lt;/button&gt;
                              &lt;/p&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--You must be logged in--&gt;
  </code></pre>
  
  <p>From my javascript function I am calling it as follows:</p>
  
  <pre><code> function addToWishlistFun(tourid) {
          if (document.getElementById("wishlist" + tourid).value == "added")
          {
              $.post('@Url.Action("RemoveFromWishlist", "Home")', { id: tourid }, function (data) {
                  if (data) {
                      var elementid = "wishlist" + tourid;
                      document.getElementById(elementid).innerHTML = "Add to wishlist" + "&lt;i class=\"fa fa-heart-o\"&gt;&lt;/i&gt;";
                      document.getElementById(elementid).value = "notadded";
                  }
                  else {
                      //$("#testPopup").toggle();
                      document.getElementById("#must-be-logged-in")
                    //  alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
                  }
              });
          }
  </code></pre>
  
  <p>However, when the button is clicked nothing is shown. </p>