modal showing not working after ajax call

i have faced a problem. i created edit form throw ajax modal showing. my code is working fine but modal showing with overlap.

here is my code..

$('.edit-currency').on('click', function(){
            // create the backdrop and wait for next modal to be triggered
            var el = $(this);
            var id = el.attr('data-id');
            var fullUrl = site_url+'/currency/edit/'+id;
            $('body').modalmanager('loading');
            setTimeout(function(){
                $currencyEditModal.load(fullUrl, '', function(){
                    $currencyEditModal.modal();
                });
            }, 1000);
        });

// my modal called

<a href="javascript:;" class="edit-currency" data-id="{{ $value->id }}">
                                                    <i class="fa fa-edit"></i> Edit </a>

<div id="ajax-currency" class="modal fade" tabindex="-1"> </div>

// controller

  public function edit($id)
{
    $data['page_title'] = $this->page_title;
    return view('currencies.ajax-edit', $data);
}

// here is my

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">Modal Title</h4>
    </div>
    <div class="modal-body"> Modal body goes here </div>
    <div class="modal-footer">
        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
        <button type="button" class="btn green">Save changes</button>
    </div>
</div>

here is my output screenshot enter image description here

2 answers

  • answered 2018-05-16 05:32 slash

    I think there is missing </div> ?

    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Modal Title</h4>
        </div>
        <div class="modal-body"> Modal body goes here </div>
        <div class="modal-footer">
            <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
            <button type="button" class="btn green">Save changes</button>
        </div>
    </div>
    </div> <!-- missing end tag i think? -->
    

  • answered 2018-05-16 15:54 kazi

    remove modal-dialog and modal-content.

    This is my final modal

    <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria hidden="true"></button>
         <h4 class="modal-title">Modal Title</h4>
    </div>
    <div class="modal-body"> 
       Modal body goes here
    </div>
    <div class="modal-footer">
        <button type="button" class="btn dark btn-outline" data dismiss="modal">Close</button>
        <button type="button" class="btn green">Save changes</button>
    </div>