CODEWITHSUNDEEP
javascriptjquery
Uj Corb
Uj Corb

Reputation: 2159

modal.style.display does not work

I have a feedback form on a modal box that get changed to a message 'Thank you for your feedback!' once the user submits it, thanks to the following code:

const modal = $(".feedback-modal")
modal.html("<div class='modal-content col-sm-8 col-sm-offset-2'><span class='close'>&times;</span><p>Thank you for your feedback!</p></div>");
modal.style.display = 'none'
console.log('OK')

The first two lines works perfectly. However, the third one does not. I want the modal box to disappear, hence I set de .style.display to 'none', but it does not work, although if I write that line in the browser console, it works. Notice that the console.log('OK') does not get executed either.

Any Idea ?

Upvotes: 0

Views: 1455

Answers (1)

Blake Simpson
Blake Simpson

Reputation: 1088

It is because modal is a jQuery object, therefore .style is undefined and this causes the script to crash.

Instead just use the jQuery .hide() method.

const modal = $(".feedback-modal")
modal.html("<div class='modal-content col-sm-8 col-sm-offset-2'><span class='close'>&times;</span><p>Thank you for your feedback!</p></div>");
modal.hide();
console.log('OK')

Upvotes: 1

Related Questions