Solved

modal.js doesn't close on click x

Posted on 2014-12-02
5
180 Views
Last Modified: 2014-12-02
I am using the jquery modal.js file and when I click on the x the box doesn't close.
Is something wrong or covering the x.
You can see my file here:

http://parkplaceofbelvidere.com/Contact_Us.html
0
Comment
Question by:rivkamak
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40477370
And how do we get the modal?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 40477380
In .modal-body {} you are moving the content up above the close button with top:-20px
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40477382
add this in your document.ready block or in a script tag at the end of your body tag

$(".modal button.close")
    .css("z-index",1)
    .click(function() { 
          $(this).closest(".modal").fadeOut("slow");
    });

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40477403
To
.modal-header .close {}
add
z-index:1
0
 
LVL 10

Accepted Solution

by:
Hans Langer earned 250 total points
ID: 40477476
in your contact-form.css
delete the top: -20px

.modal-body {
  position: relative;
  padding: 20px;
  /* top:-20px; */ <--- comment or delete this style
}

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question