title: Make bootstrap modal work with another website using greasemonkey/tampermonkey (eg SO)
body: <p>I'm just trying to add a couple of buttons, which when clicked a bootstrap dialogbox/modal should pop up. Something like this demo: <a href="http://jsbin.com/wiruhepere/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/wiruhepere/1/edit?html,css,js,output</a></p>
  
  <p>However when applying this using greasemonkey/tampermonkey on a real website, let's say stackoverflow: It's not working at all !!</p>
  
  <p>I'm suspecting some script/css conflict maybe but I don't have the knowledge to track that down :&lt;</p>
  
  <p><strong>What I'm looking for is:</strong></p>
  
  <ol>
  <li>Make the modal appear when clicking on the "Delete" button</li>
  <li>When clicking on "OK" to confirm, grab/intercept that answer to do some other stuffs...</li>
  </ol>
  
  <p>Please bear in mind I'm a beginner in this, so if soemthing isn't clear enough, feel free to ask :-)</p>
  
  <p><strong>Updated GM code based on wOxxOm comments:</strong></p>
  
  <pre><code>// ==UserScript==
  // @name        Bootstrap Test
  // @namespace   http://tampermonkey.net/
  // @description Why the hell the modal isnt working :&lt;
  // @author      Enissay
  // @include     http://stackoverflow.com/*
  // @include     https://stackoverflow.com/*
  // @resource    jqueryJS https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
  // @resource    bootstrapJS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
  // @resource    buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css
  // @resource    bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  // @resource    githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png
  // @grant       GM_addStyle
  // @grant       GM_getResourceText
  // @grant       GM_getResourceURL
  // ==/UserScript==
  
  (function() {
      //--- Inject scripts &amp; css including myCode/Func
      $("head").append("&lt;script&gt;" + GM_getResourceText("jqueryJS") + "&lt;/script&gt;");
      $("head").append("&lt;script&gt;" + GM_getResourceText("bootstrapJS") + "&lt;/script&gt;");
      $("head").append("&lt;style&gt;" + GM_getResourceText("bootstrapCSS") + "&lt;/style&gt;");
  
      var githubButtonIconSet = GM_getResourceURL ("githubButtonIconSet");
      var buttonCSS = GM_getResourceText("buttonCSS");
      buttonCSS = buttonCSS.replace (/gh-icons\.png/g, githubButtonIconSet);
      $("head").append("&lt;style&gt;" + GM_getResourceText(buttonCSS) + "&lt;/style&gt;");
  
      $("body").append("&lt;script&gt;("+myFunc+")();&lt;/script&gt;");
  })();
  
  function myFunc () {
  (function() {
      'use strict';
      var deleteButtonHtml = `
  &lt;div class="button-group"&gt;
      &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
          Launch demo modal
      &lt;/button&gt;
  
      &lt;a href="#" class="button icon edit"&gt;Edit&lt;/a&gt;
      &lt;a href="#" class="button icon remove danger"&gt;Delete&lt;/a&gt;
  &lt;/div&gt;
  `;
      var modalHtml = `
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          ...
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
  
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  `;
  
      //--- Add nodes to page
      $("body").prepend(deleteButtonHtml);
      $("body").prepend(modalHtml);
  
      //--- Attach event to button
      $(".button-group").find(".remove").click(function(evt){
          //debugger;
          $('#myModal').modal({
              keyboard: true
          });
      });
  })();
  }
  </code></pre>
  
  <p><strong>Initial GM code bellow:</strong></p>
  
  <pre><code>// ==UserScript==
  // @name        Bootstrap Test
  // @namespace   http://tampermonkey.net/
  // @description Why the hell the modal isnt working :&lt;
  // @author      Enissay
  // @include     http://stackoverflow.com/*
  // @require     https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
  // @require     https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
  // @resource    buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css
  // @resource    bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  // @resource    githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png
  // @grant       GM_addStyle
  // @grant       GM_getResourceText
  // @grant       GM_getResourceURL
  // ==/UserScript==
  
  (function() {
      'use strict';
  
      var deleteButtonHtml = `
  &lt;div class="button-group"&gt;
      &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
          Launch demo modal
      &lt;/button&gt;
  
      &lt;a href="#" class="button icon edit"&gt;Edit&lt;/a&gt;
      &lt;a href="#" class="button icon remove danger"&gt;Delete&lt;/a&gt;
  &lt;/div&gt;
  `;
      var modalHtml = `
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          ...
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  `;
      //--- Add nodes to page
      $("body").prepend(deleteButtonHtml);
      $("body").prepend(modalHtml);
  
      //--- Attach event to button
      $(".button-group").find(".remove").click(function(evt){
          $('#myModal').modal({
              keyboard: false
          });
      });
  
  
      //--- Style our newly added elements using CSS.
      GM_addStyle (GM_getResourceText ("bootstrapCSS"));
      var githubButtonIconSet = GM_getResourceURL ("githubButtonIconSet");
      var buttonCSS = GM_getResourceText("buttonCSS");
      buttonCSS = buttonCSS.replace (/gh-icons\.png/g, githubButtonIconSet);
      GM_addStyle(buttonCSS);
  })();
  </code></pre>