bootstrap modal is not showing

bootstrap modal is not showing

mubeenalimubeenali Posts: 4Questions: 1Answers: 0

My question is pretty simple.I tried everything but my modal is not showing can anyone help me please ..
My client side Code:

$(function() {
       
      var GridView =  $('#users_table').DataTable({
          bprocessing: true,
          bserverSide: true,
          ajax: '{{ route('users.lists') }}',
          deferRender: true,
          columns: [
              { data: 'id', name: 'id' },
              { data: 'name', name: 'name' },
              { data: 'email', name: 'email' },
              { data: 'action', name: 'action'},
               
          ]
      });
 
      $('#users_table').show();
      GridView.columns.adjust().draw();
  });

My Server Side code is:

return Datatables::of(User::all())
                                  ->addColumn('action',function($user){
                           return '<button data-toggle="modal" data-target="#rolesModel" class="btn btn-success">Mss</button>
                                   <a data-toggle="tooltip" title="Edit" class="btn btn-danger"><i class="fa fa-edit"></i></a>';
                                             
                                  })
                                  ->make(true)
                                 ;

My rolesModel at the bottom of the page:

<!-- Modal fade in scale up -->
<div class="md-modal md-fade-in-scale-up" id="rolesModel">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <p>
            <button class="btn btn-danger md-close">Close me!</button>
            <button class="btn btn-success md-close">Some button</button>
            </p>
        </div>
    </div><!-- End div .md-content -->
</div>

I fetch the data and show in table successfully.My only concern is to show model at click.Please help me . i have been traped inside it. thanks a lot.

Replies

This discussion has been closed.