Bootstrap modal carousel

• Presentation
• Modal-carousel
• Carousel-fit
• Modal-local
  • Demo
  • Usage
  • Events
• Modal-fullscreen
• More examples
• GitHub project

Purpose

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

---

Demo

The default one from Twitter Bootstrap
See it in action

Detach the current sentence to the modal box
See it in action

---

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.