CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
user3349225
user3349225

Reputation: 23

Issues with Bootstrap Modal Window

first time posting on here. I've searched thru the site and couldn't find an answer to this issue I'm having so I hope someone may have an idea:

The issue is, when clicking the 'contact' link on the homepage, the modal window shows with content (i.e. buttons / text) but the screen turns grey and is unresponsive when clicking the 'close' button.

<div class = "modal fade" id = "contact" role = "dialog">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h4>Contact Tech Site</h4>
            </div>
            <div class = "modal-body">
                                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</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" data-dismiss = "modal">Save changes</button>
            </div>
        </div>
    </div>

</div>
</div>

To be clear, this is what my page looks like after clicking the 'contact' link: https://www.dropbox.com/s/a8etlue21jfk1ti/Screenshot%202014-06-24%2017.54.27.png

Any advice would be much appreciated.

Upvotes: 2

Views: 3300

Answers (1)

Ravimallya
Ravimallya

Reputation: 6600

You have several issues. You have not closed divs, uls in navbar. Also, you have not commented this line properly <!-- maximum 12 grids i.e. no more than 4x "col-md-3" --> etc. In detail:

  1. You have not closed the div for this div <div class="navbar navbar-primary navbar-static-top">.
  2. Not closed the ul for this ul <ul class="nav navbar-nav navbar-right">.
  3. Not closed the div for the modal div <div class="modal fade" id="contact" role="dialog">

http://fiddle.jshell.net/52VtD/6726/show/ Modal is working fine.

Bottom Line

To get what you expected, your HTML must be clean and semantic without missing any closing elements,

Upvotes: 2

Related Questions