bootstrap modal is not showing data tables latest version

mubeenali

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.

mubeenali

@allenbrown please help m m unable to host it.

colin

There are a few threads in the forum, such as this and this, hopefully they'll do the trick.

If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin