Load a Modal with remote contents about bootstrap-modal HOT 12 CLOSED

You are using bootstrap's default way of loading in content via the data-remote attribute. For backwards compatibility reasons, I did not want to change the way that works.

Check out the ajax modal on the demo page for an example. It's a bit more of a manual process but should be what you are looking for.

from bootstrap-modal.

I tried using that code, but the modal was always placed at the lower region of the screen – the css rule that was active was top: 50%. Non remote modals worked fine.

I will try to make a working example.

from bootstrap-modal.

Sounds like the content wasn't loaded into the element before it was modaled. Every modal has the rule top: 50% and then a negative margin-top based on it's computed height is applied on modal.show in order to vertically center it.

from bootstrap-modal.

This is how I am initializing the modals.

  $(document).on('click', "[data-toggle='modal'][data-rem]", function(){
    // create the backdrop and wait for next modal to be triggered
    $('body').modalmanager('loading');
    $link = $(this);
    $modal = $($(this).data('target'));

    $modal.load($link.data('rem'), '', function(){
      $modal.modal();
    });

  });

<a data-toggle="modal" data-rem="..my url.." data-target="#student_report">
    Click here
</a>

<div class="modal hide" id="student_report">

</div>

The modal appears behind the backdrop. Clicking the backdrop makes the backdrop appear behind the modal.

This is the html code that results:

<div class="modal-scrollable" style="z-index: 1050;">

  <div class="modal hide in" id="student_report" style="display: block; margin-top: 0px;" aria-hidden="false" tabindex="-1">

    <div class="modal-header">

    </div>

    <div class="modal-body">
      ..
    </div>

    <div class="modal-footer">

      <a class="button" data-dismiss="modal">Close</a>

    </div>
  </div>
</div>

from bootstrap-modal.

The key thing to remember is that bootstrap attaches it's own events to body listening for a click on [data-toggle="modal"]. Here's what I suspect is happening:

1. a[data-toggle="modal"] fires click event
2. bootstrap captures the event for [data-toggle="modal"] first and calls modal.show
3. your event is captured 2nd matching [data-toggle="modal"][data-rem], throwing up the loading mask afterwards
4. content is now loaded in after the modal appears causing it not to be centered.
5. you modal.show has no effect because the modal is already shown at this point.

I think the easiest thing to do is remove data-toggle="modal" from your remote modals so they are not captured by bootstrap.

from bootstrap-modal.

That was the problem :)

Thanks!

Another thing that isen't working for me are animations. Is there anything I need to do to activate it?

I have component-animations.scss activated.

from bootstrap-modal.

I'm not sure what component-animations.scss is. Make sure the bootstrap js file is included, specifically the support class. In there is where it attempts to detect whether animations are supported in the current browser or not.

from bootstrap-modal.

Yes, sorry I wasn't specific enough: component-animations is the animation package that comes with bootstrap. I am including all js files, except modal – since I am using yours.

from bootstrap-modal.

Ah you mean the less files. It should work as long as all the less files are being included (and using a browser that supports transitions obviously). The animation for the modal is actually declared in the modals.less file.

And make sure bootstrap-modal.css is being included after the bootstrap less files

from bootstrap-modal.

I've been including all the default bootstrap js files, including bootstraps modal plugin, before @jschr's modal plugin

heres what I've been doing to load remote files..
I added a class fire-modal to my links that I want to fire the modal, and then add anotherdata- attribute to try to pass what the user was going for.. so in the exampe below you see I have data-fire="settings" which would get sent to the server in the $_GET['tigger'] variable

<a href="#" class="fire-modal" title="User Settings" data-toggle="modal" data-fire="settings"><em class="icon-user-md"></em></a>

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

$(function(){
    $Modal = $('#modal')
    $(document).delegate('.fire-modal', 'click', function(){
        var fire = $(this).data('fire')
        $Modal.modal('hide')
        $('body').modalmanager('loading');
        $.get('/ajax/get.php', {trigger: fire}, function(res){
            $Modal.html(res).modal()
        })
    })
})

and an example of your get.php file would look if you're using php..

swicth($_GET['trigger']){
    case 'settings': include('settingsPage.php'); break;
    case 'post': include('post.php'); break;
}

from bootstrap-modal.

@jschr I couldn't make transitions work, but I am sure it's my fault. This is an old application and there is a lot of legacy code, I am some there a conflict somewhere. I am cool with what we had achieved, responsive modals was my top wish. Thanks for your awesome work!

from bootstrap-modal.

If you have a url, I'd be happy to take a look.

from bootstrap-modal.