Bootstrap modal carousel

Purpose

Detach a part of the content of the page to a modal box.


Demo

The default one from Twitter Bootstrap

Detach the current sentence to the modal box


Usage

There is two ways to proceed: using the data attributes or the JavaScript way.

Via data attributes

Based on the default Twitter Bootstrap code of the modal component, the only change you need to do is to add on the controller element an attribute data-local="#myContent" to target the element.

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-local="#myContent">Demo</button>

Via JavaScript

Based on the default Twitter Bootstrap code of the modal component, the only change you need to do is to add on the controller element an attribute data-local="#myContent" to target the element.

$('#myModal').modal({
	local: '#myContent'
	...
});

Common parts

<script src="modal-local.js"/></script/>

<div id="myContent">This is another content.</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Events

Some events are trigerred before and after the content has been detached/replaced.

Event Type Description
detach.bs.local This event fires immediately when the content is going to be detached.
detached.bs.local This event is fired when the detached content has been made placed in the modal.
replace.bs.local This event is fired immediately when the modal is going to hide.
replaced.bs.local This event is fired when the detached content has been made replaced at its origin place.