O'Reilly logo

Bootstrap for Rails by Syed Fazle Rahman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a shopping cart using modals

As stated earlier in this book, to create a Bootstrap modal, we need a <div> element with the .modal class. We will also add the .fade class to apply the fading transition. It is the only transition animation provided by Bootstrap.

  1. At end of the application.html.erb file, add the markup for the modal, as follows:
    <div class="modal fade">
    </div>
  2. One of the most important things to note here, is that we have two modals in this page. To uniquely identify each one of them, we should give different IDs to them. In this case, we already have an ID with us, which is shoppingCart. So, let's add it to our markup:
    <div class="modal fade" id="shoppingCart">
    </div>
  3. Next, we need to place a markup for a modal dialog and modal ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required