CODEWITHSUNDEEP
jquerybootstrap-4bootstrap-modal
Lex Eichner
Lex Eichner

Reputation: 1066

bootstrap modal not dispplay none or showing as modal

I am trying to get a simple modal window showing and it is not working properly.

It is showing as opacity:0 which is fine but it does not have display:none;

When I click the link it unhides it and focuses on it but it doesn't show with a fixed position and so just looks like another element on the page.

This is the markup: 

                    <div class="profile-Photo-container">
                    <a href="#" data-target="#profile-pic-upload" data-toggle="modal">
                        <img class="profile-photo" src="" />
                    </a>
                    <div class="model fade" id="profile-pic-upload" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3 class="modal-title">Profile Picture</h3>
                                    <a class="close" data-dismiss="modal">&times;</a>
                                </div>
                                <div class="modal-body">
                                    <p>Add stuff here</p>
                                </div>
                                <div class="modal-footer">
                                    <a href="#" class="btn" data-dismiss="modal">Close</a>
                                    <a href="#" class="btn btn-primary">Edit Profile Picture</a>
                                </div>
                            </div>
                        </div>
                    </div>

Anyone able to help?

Upvotes: 0

Views: 49

Answers (1)

Umbo
Umbo

Reputation: 3142

There's a typo in your code: you wrote model instead of modal at line 5.

Upvotes: 1

Related Questions