Bootstrap modal creating backdrop ajax call

Vote count:

0

My issue is interesting. Something inside Twitter Bootstrap is creating additional backdrops and scrollable class elements.

I'm using bootstrap v3.1.1 with bootstrap-modal.css and bootstrap-modal-bs3patch.css

This is what appears in Chrome. The code is creating additional .modal-backdrop and .modal-scrollable divs and I have no idea why. So the user has to click the modal 3 times in order to get it to clearly focus. Everytime the user clicks - a .modal-backdrop div gets removed.

See image below

I'm using ajax to call an external php file as my modal, the code used to call the modal is here:

var $modal = $('#ajax-modal');

$('.m-ajax').on('click', function(){
    if($(this).children('a.postid').hasClass('tomodal')) {
        $('body').modalmanager('loading');
        var postid = $(this).children('a.postid').attr('data-val');
        var xurl = "sections/blog_post.php";

         // setTimeout(function(){
        $.get(xurl, {myid: postid}, function(data) {
            $(data).modal('hide');
            $('body').removeClass('modal-open');
            $(data).appendTo('body').modal('show'); 
        }); 

    } 
    else {
        *** This code is not the issue ***
    }
});

This is the external php file with the modal:

<div class='modal-content'>
    <input type='hidden' value='<?php echo $postget; ?>' id='postget'/>
    <div class='modal-header'>
        <p>
            <span>
                <span class='soc-btn sharex'>Share:</span><br/>
                <button class='facebook-btn soc-btn' onclick="event.stopPropagation();window.open('http://ift.tt/1cFNY44 echo $Get_url . "?blog_post=" . $postid; ?>','_blank');"></button>
                <button class='twitter-btn soc-btn' onclick="event.stopPropagation();window.open('http://ift.tt/JkEfX1 echo $twitter_title; ?>&url=<?php echo $Get_url . "?blog_post=" . $postid; ?>','_blank');"></button>
                <button class='google-plus-btn soc-btn' onclick="event.stopPropagation();window.open('http://ift.tt/IIZSQS echo $Get_url . "?blog_post=" . $postid; ?>','_blank');"></button>
                <button class='linkedin-btn soc-btn' onclick="event.stopPropagation();window.open('http://ift.tt/1evCIKZ echo $Get_url . "?blog_post=" . $postid; ?>&title=&summary=&source=','_blank');"></button>
            </span>
        </p>
        <button type="button" class="close close_modal" data-dismiss="modal">×</button>

        <h3><?php echo $title; ?></h3>
        <span><?php echo $author; ?> </span><span> <?php echo $date1; ?></span>

    </div>
    <div class="modal-body">
        <div class="row-fluid">
          <div>
            <?php echo $content; ?>
        </div>
    </div>
    <div class="modal-footer" >
        <button type='button' class='btn btn-info'>Comments</button>
        <button type="button" data-dismiss="modal" class="btn close_modal">Close</button>

    </div>
 </div>

If you want something to physically look at - you can look at my test site (still in works): --> Click Here. Click on any of the blogs. I'm a noob developer so I'm sure my code is super messy - I apologize in advance.

Any advice will be much appreciated.

asked 54 secs ago

Sanya

190

Bootstrap modal creating backdrop ajax call