Calling a Modal Window

V Scotch
asked 7 years ago

Hello. I would like to understand how your modal windows work as this was is a bit unusual for me. I’m using DW Store theme but I want to show a modal window right after a user clicks on a big yellow button on right at the buttom of my header image on my aerobiletik.ru website. I had to write code directly into the footer file of the theme and it works but the way it pops up is wrong, it seems like it is some css conflict or something. I have not changed any CSS files.

I have added a modal window at the botom of footer file right above the </body> teg:

<div id=”myModal” class=”modal”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” >x</button>
<h4 id=”myModalLabel”>Subscribe for notifications</h4>
</div>
<div class=”modal-body”>
<span>We can start tracking your flight ticket and alert you when its privce will go down</span>
</div>
<div class=”modal-footer”>
<button class=”btn” data-dismiss=”modal” >Close</button>
<button class=”btn btn-primary”>Subscribe</button>
</div>
</div>

Then i have attahed .click event to that yellow button and it all works fine. But you can see the modal window is dark and it is not in the center but it takes all width (not the small tooltip that pops up asking to fill empy field, but the modal window above that with “Subscribe for notifications” title).
Could you please suggest any CSS fix so that modal window displays corectly (at the center of screen and having a white background)?

3 Answers

DominicStaff
answered 7 years ago

you can add the following code to the style.css file:

.modal-open .modal {
   width: 500px;
   top: 50px;
   height: 350px;
   margin: 0 auto;
   background: #fff !important;
}
.modal-backdrop { background-color: #fff;}

V Scotch
replied 7 years ago

Great! Thank you very much. The only thing missing then is the dark background around the modal window. Could you advice how to do this?

And I also noticed the height of the modal window is computed by some of your script. Is this possible to make this just enough to fit all the modal title, text and buttons, and not more than that?

DominicStaff
answered 7 years ago

You can remove the CSS code that I have sent in the previous answer and use the following code:

.modal-open .modal {
padding-right: 350px !important;
padding-left: 350px;
top: 0;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
}
.modal-backdrop.in {
opacity: 0;
filter: alpha(opacity=50);
}
.modal-header, .modal-body, .modal-footer {
background: #fff;
}

V Scotch
replied 7 years ago

Great, thank you!

V Scotch
replied 7 years ago

You have great support!

Dominic Staff
replied 7 years ago

My pleasure, If you have any issue or question please let me know, I will help you resolve it.

V Scotch
replied 7 years ago

Sorry, I have just realized, when I click on header or footer of that modal window it closes down and I can not even catch button clicks in the footer. When I click on modal-body it doesn’t close and this is good. How can I make the modal window not to close after clicking on modal-header and modal-footer?

DominicStaff
answered 7 years ago

You can add the following code to the style.css file:
.modal-backdrop.in {display: none;}