Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Bootstrap #modal not working properly

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #195183
    NeocBlack
    Participant

    Hello Combat’s,

    Hello,

    I’m busy with a project to implement bootstrap in my Magento website. So far most CSS and JS are implemented ok.
    I’m not very familair yet with bootstrap and ran in an issue with the id=”modal’

    I’ve setup a test page here: http://smart-cabinets.com/btstrp-19098755
    I copied some content from a bootstrap tutorial to trigger a modal where I can place an embedded video.
    The page loads fine without any errors but when the modal button is clicked the modal appears transparent and the overlay appears on full screen and modal is under the overlay. I tried several fixes with z-index and positioning but to no avail.

    For someone who is more familiair in bootstrap & CSS but I can’t figure it out where to get it to work

    Please have a quick look and let me know what I can do to fix this.

    Thank you on advance!!

    Code:

    <h3 class=”panel-title”>
    Incident Management
    </h3>
    Our programs are based on the National Incident Management System (NIMS) developed by the Department of Home Security.
    <button class=”btn btn-primary btn-lg” data-toggle=”modal”
    data-target=”#myModal”>
    Launch demo modal
    </button>

    <!– Modal –>
    <div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog”
    aria-labelledby=”myModalLabel” aria-hidden=”true”>

    <button type=”button” class=”close”
    data-dismiss=”modal” aria-hidden=”true”>
    ×
    </button>
    <h4 class=”modal-title” id=”myModalLabel”>
    This Modal title
    </h4>
    <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/5HxHqM2g0ZE&#8221; frameborder=”0″ allowfullscreen></iframe>

    <button type=”button” class=”btn btn-default”
    data-dismiss=”modal”>Close
    </button>
    <button type=”button” class=”btn btn-primary”>
    Submit changes
    </button>

    <!– /.modal-content –>

    <!– /.modal –>

    #195185
    Paulie_D
    Member

    The code in isolation isn’t really a lot of help.

    I’d suggest making a demo using BOOTPLY that will allow us to see what’s going on rather than having to inspect the test site with Developer Tools.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.