Mv27
Reputation: 560
Close cross on Bootstrap modalbox is not working
I am working with Bootstrap 3. I have a modalbox, where I inserted a cross in the upper right corner with the following Bootstrap code:
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
I actually thought that the bootstrap class="close" would close the modal. But It seems that I need something more to make that work?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<form action="https://zalis.us17.list-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&id=d07c036d2e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
<script>
let $input = document.getElementById('mc-embedded-subscribe')
$input.addEventListener('click', function (){
this.value= "close";
this.setAttribute('data-dismiss','modal');
})
</script>
</body>
</html>Upvotes: 0
Views: 40
Answers (3)
gavgrif
Reputation: 15499
You need the data-dismiss="modal" attribute added to the button in order to close the modal.
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"/>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div id="mc_embed_signup">
<form action="https://zalis.us17.list-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&id=d07c036d2e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
<script>
let $input = document.getElementById('mc-embedded-subscribe')
$input.addEventListener('click', function (){
this.value= "close";
this.setAttribute('data-dismiss','modal');
})
</script>
</body>
</html>Upvotes: 1
לבני מלכה
Reputation: 16251
Use data-dismiss="modal" to close button
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
<button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<form action="https://zalis.us17.list-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&id=d07c036d2e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
<script>
let $input = document.getElementById('mc-embedded-subscribe')
$input.addEventListener('click', function (){
this.value= "close";
this.setAttribute('data-dismiss','modal');
})
</script>
</body>
</html>Upvotes: 0
K K
Reputation: 18099
You need to add data-dismiss="modal" in the close element as an attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
<button type="button" data-dismiss="modal" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<form action="https://zalis.us17.list-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&id=d07c036d2e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
<script>
let $input = document.getElementById('mc-embedded-subscribe')
$input.addEventListener('click', function (){
this.value= "close";
this.setAttribute('data-dismiss','modal');
})
</script>
</body>
</html>Upvotes: 0
Related Questions
- Bootstrap Modal Closing Behavior
- Bootstrap modal not closing correctly (modal in modal)
- Closing bootstrap modal
- Bootstrap 3 close current modal open new modal
- Close button in a Bootstrap modalbox is not working
- Bootstrap 4 Modal Not Closing Properly On Hide
- I am applying modal from Bootstrap but it is not closing properly
- Twitter-bootstrap modal does not close on click
- closing issue with modal in modal - bootstrap
- Why is the close button (X) not rendering correctly in my modal?