title: Boostrap modal integration in laravel table
body: <p>I have a laravel datatable the following:</p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/&gt;
    &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>This is the table:</p>
  
  <pre><code>&lt;td&gt;&lt;button 
     type="button" 
     class="btn btn-primary btn-lg" 
     data-toggle="modal" 
     data-target="#favoritesModal"&gt;
    Add to Favorites
  &lt;/button&gt;&lt;/td&gt;
  </code></pre>
  
  <p>and here I have created the modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="favoritesModal" 
       tabindex="-1" role="dialog" 
       aria-labelledby="favoritesModalLabel"&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="favoritesModalLabel"&gt;The Sun Also Rises&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;
          Please confirm you would like to add 
          &lt;b&gt;&lt;span id="fav-title"&gt;The Sun Also Rises&lt;/span&gt;&lt;/b&gt; 
          to your favorites list.
          &lt;/p&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;span class="pull-right"&gt;
            &lt;button type="button" class="btn btn-primary"&gt;
              Add to Favorites
            &lt;/button&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone please help me how do I implement this modal in a datatable row?
  <strong>Basically I want everytime the user clicks a button show Image to open a modal with the image inside</strong>
  Thanks in advance</p>