user1532468
Reputation: 1753
Modal window not closing from button
I am using a custom modal window with a form and cannot close the window from a button. I have tried various options of data-dismiss but still not working. I am launching the modal from a menu click on within a li element like so:
<li><a href="#modal">Contact</a></li>
Is this correct?
I am also confused as to why the window closes when the ;times x is clicked. As I am a new user to html5 I would be grateful if someone could help with this. many thanks
Bootstrap v3.3.7
html
<div class="modal" id="modal" role="dialog">
<div class="modal__dialog">
<section class="modal__content">
<header class="modal__header">
<h2 class="modal__title"><div style="margin: 0 0 0 30px;">Contact Us</div></h2>
<div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
<a href="#" class="modal__close">×</a>
</header>
<div class="modal__body">
<div class="content-block contact-3">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="contact" class="form-container">
<fieldset>
<div id="message"></div>
<form method="post" action="js/contact-form.php" name="contactform" id="contactform">
<div class="form-group">
<input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
</div>
<div class="form-group">
<input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
</div>
<div class="form-group">
<textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
<div class="editContent">
<p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
</div>
</div>
<div class="form-group">
<button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
</div>
</form>
</fieldset>
</div>
<!-- /.form-container -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!--// END Contact 3-1 -->
</div>
</section>
</div>
Upvotes: 0
Views: 73
Answers (3)
Lakindu Gunasekara
Reputation: 4271
The reference in calling the modal seems to be wrong. Other than that, modal is working perfectly. Try this snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row text-center">
<a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Contact</a>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal__title">
<div style="margin: 0 0 0 30px;">Contact Us</div>
</h2>
<div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
</div>
<div class="modal-body">
<div class="content-block contact-3">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="contact" class="form-container">
<fieldset>
<div id="message"></div>
<form method="post" action="js/contact-form.php" name="contactform" id="contactform">
<div class="form-group">
<input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
</div>
<div class="form-group">
<input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
</div>
<div class="form-group">
<textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
<div class="editContent">
<p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
</div>
</div>
<div class="form-group">
<button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
</div>
</form>
</fieldset>
</div>
<!-- /.form-container -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>Upvotes: 1
Gonzalo
Reputation: 1876
If you are using bootstrap modals you can read their docs. You are using the example buttons:
<div class="form-group">
<button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
</div>
The data-dismiss="modal" is what makes the modal to close, so you could make your link like this:
<a href="#" class="modal__close" data-dismiss="modal">×</a>
Upvotes: 0
Roman Koliada
Reputation: 5082
- You need to add
data-toggle="modal"anddata-target="#modal"attributes to your link. - You need to add
data-dismiss="modal"attribute to your close link.
See my fiddle and read the documentation:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<li><a data-toggle="modal" data-target="#modal">Contact</a></li>
<div class="modal" id="modal" role="dialog">
<div class="modal__dialog">
<section class="modal__content">
<header class="modal__header">
<h2 class="modal__title">
<div style="margin: 0 0 0 30px;">Contact Us</div>
</h2>
<div style="margin: 4px 0 0 34px; color: white;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
<a href="#" class="modal__close" data-dismiss="modal">×</a>
</header>
<div class="modal__body">
<div class="content-block contact-3">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="contact" class="form-container">
<fieldset>
<div id="message"></div>
<form method="post" action="js/contact-form.php" name="contactform" id="contactform">
<div class="form-group">
<input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
</div>
<div class="form-group">
<input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
</div>
<div class="form-group">
<textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
<div class="editContent">
<p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
</div>
</div>
<div class="form-group">
<button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
</div>
</form>
</fieldset>
</div>
<!-- /.form-container -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!--// END Contact 3-1 -->
</div>
</section>
</div>Upvotes: 1
Related Questions
- Bootstrap Modal not closing on X or Close button, but does on ESC or clicking in the overlay
- Bootstrap modal not closing correctly (modal in modal)
- Close button on modal not working...what am i doing wrong?
- Bootstrap modal close button
- Bootstrap 3 modal does not close on outside click
- Close button in a Bootstrap modalbox is not working
- Twitter-bootstrap modal does not close on click
- Bootstrap modal close button doesnt work
- Bootstrap Modal doesn't close
- bootstrap 3 modal window close button will not close modal window