title: Using BootStrap and Bootbox.js in MVC 4
body: <p>Am working on sample MVC 4(Razor for Views) application , also using BootStrap and  Bootbox.js(for displaying programmatic dialog boxes ) .</p>
  
  <p>Bottom of the my view page(.cshtml) is the below mentioned script for displaying model popup( I copied this sample script from <a href="http://bootboxjs.com/" rel="nofollow">http://bootboxjs.com/</a> :) )</p>
  
  <pre><code>@section scripts 
  {
   &lt;script&gt;
   function confirmBox() {
   $("#myModal").on("show", function () {    // wire up the OK button to dismiss the    modal when shown
   $("#myModal a.btn").on("click", function (e) {
   console.log("button pressed");   // just as an example...
   $("#myModal").modal('hide');     // dismiss the dialog
   });
   });
  
   $("#myModal").on("hide", function () {    // remove the event listeners when the dialog is dismissed
   $("#myModal a.btn").off("click");
   });
  
   $("#myModal").on("hidden", function () {  // remove the actual elements from the DOM when fully hidden
   $("#myModal").remove();
   });
  
    $("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
    "backdrop": "static",
    "keyboard": true,
    "show": true                     // ensure the modal is shown immediately
    });
    }
  
   &lt;/script&gt;
  
   }
  </code></pre>
  
  <p>Below is the HTML which is also part of view , for displaying model dialog</p>
  
  <pre><code> &lt;!-- set up the modal to start hidden and fade in and out --&gt;
   &lt;div id="myModal" class="modal fade"&gt;
   &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
   &lt;!-- dialog body --&gt;
   &lt;div class="modal-body"&gt;
   &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
   Hello world!
   &lt;/div&gt;
    &lt;!-- dialog buttons --&gt;
    &lt;div class="modal-footer"&gt;&lt;button type="button" class="btn btn-primary"&gt;OK&lt;/button&gt;        &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CASE 1</strong>.  My view also has below mentioned code , which displayes all the Brand details. if you observe I have attaced confirmBox() to the click event of Delete Link</p>
  
  <pre><code>@foreach (var item in Model)
  {
   &lt;tr&gt;
   &lt;td&gt;@Html.DisplayFor(model =&gt; item.BRAND_NAME)&lt;/td&gt;
   &lt;td&gt;@Html.DisplayFor(model =&gt; item.BRAND_DESCRIPTION)&lt;/td&gt;
   &lt;td&gt;@Html.ActionLink("Edit", "edit", new { id = item.PK_BRAND_ID } )&lt;/td&gt;
   &lt;td&gt;@Html.ActionLink("Delete" , "delete" , new { id = item.PK_BRAND_ID } , new { onclick="return confirmBox();"})&lt;/td&gt;
   &lt;/tr&gt;
  }
  </code></pre>
  
  <p><strong>CASE 2.</strong> My View also has a static html code</p>
  
  <pre><code>&lt;a href="#"onclick="return confirmBox();" &gt; Click Me &lt;/a&gt;
  </code></pre>
  
  <p>Now the problem that am facing is , in CASE 2 model window is getting displayed where as in CASE 1 it is not getting displayed.</p>
  
  <p>Please let me know the mistake am doing ?</p>