I have this simple modal form done with Bootstap 3, and I have no clue why it's not appearing when I click on the button.
<div id="modal" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Some title</h3>
</div>
<div class="modal-body">
<form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
<label>Name:</label>
<input type="text" class="span6">
<label>Email:</label>
<input type="text" class="span6">
<label>Message:</label>
<textarea type="text" class="span12" rows="4"></textarea>
</form>
</div>
<div class="modal-footer">
Send
Cancel
</div>
</div>
And this is the button that should make this modal window appear when clicked:
<p class="text-center">
<a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
Message me
</a>
</p>
It is not much different to the example codes I've seen around the web, but I can't make the modal window to appear.
Any idea why it's not working?
Edit:
This is how I'm including the Bootstrap JS files:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
Try removing the class hide from the modal div:
<div id="modal" class="modal fade in" style="display: none;">
You don't have the js file of bootstrap. Those aren't js files but css files of bootstrap. Include this inside your body element just before the closing tag
< /body>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
both css and js files are needed
Just in case somebody else has the "why-won't-this-crazy-thing-work" moment.
I had the same problem, but other modal forms were working.
Finally, I realized that I had server-side code to handle the button click as well as the modal stuff. The server-side code won, unfortunately I didn't have nothing coded in there.
So, check for server-side code.
Related
I have created a basic site with a grid layout and and a modal with a login form. However, I noticed after adding tags for the modal header and footer the layout completely screws up and leaves a large gap in the middle. The page currently looks like
The expected outcome for the page should be like here:
https://codepen.io/mor10/pen/QvmLpd
and if I do not include the modal footer and header tags it works as expected. The current code for and surrounding the modal is this:
Code for sake of being able to post with codepen link:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</main>
It's very strange to me that the modal is affecting the layout, but only when the header and footer of the modal are used. On previous sites I have made, I have used multiple modals and not had this issue.
You have a closing </div> tag without an opening one:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> <!-- this should be removed -->
</main>
Is there any other short and fast way to align to your <div> or <input> or anything? Suppose I want to make a bootstrap modal:
<!-- Trigger the modal with a button -->
<li>
<button type="button" class="fa fa-search fa-2x search-icon" data-toggle="modal" data-target="#search"></button>
</li>
<!-- Modal -->
<div id="search" class="modal fade" role="dialog">
<div class="modal-dialog search">
<!-- Modal content -->
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<input class="searchArea" type="search" placeholder="Search Here">
</div>
</div>
</div>
If I make a modal and want to add <input type="search"> in the modal, and without any CSS positioning (top left right bottom), can I put the INPUT SEARCH box in the center of the page?
Use auto margins for left and right. For example:
.searchArea {
margin-left: auto;
margin-right: auto;
/* or, for example, margin: 20px auto; */
}
Seems like Bootstrap's text-center class does the job:
<div class="text-center">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<input class="searchArea" type="search" placeholder="Search Here">
</div>
Fiddle
you could use
<center></center>
... but is deprecated
another way is using class of bootstrap
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
thanks to TylerH in her answer... https://stackoverflow.com/a/18153551/4102927
but this is css in background
In the default magento 1.9 version, I am facing a problem with modal popup.
It's working fine but the form tag is being automatically removed. When I view the page source, the form tag is there. I don't know what I'm doing wrong.
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form id="modalForm" name="modalForm" action="/test" method="post">
<input type="text" name="text" />
</form>
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
Fiddle demo
Any help?
I experienced this exact problem today (although I was using Spree rather than Magento). My mistake was placing the bootstrap modal html within an existing form element.
Chrome automatically removes form tags within an existing form element. See question here.
Moving your modal window to the bottom of the body tag may help.
I have searched the web for answers on this one with this question is closest to my own.
Bootstrap Modal popping up but has a "tinted" page and can't interact
I am creating an admin page with bootstrap and i am using modals in there.
The styling is done with Bootswatch themes.
When using some themes, opening a modal, the modal appears in a tinted page and everything freezes. I have to refresh the page to get rid of it again.
I have tried to move the modal to the bottom of the page, just before the closing
</body>
tag.
Nothing works!
Strange thing is, that with the "Basic" bootstrap css, it has the same problem.
There are some Bootswatch themes that work as they should, and some others give this problem.
I made and example in jsFiddle here: http://jsfiddle.net/qyo53dxh/
This one is with the "Paper" theme from bootswatch.
When using i.e. "United" theme, it does work normal.
What is going on?
In your fiddle you are importing bootstrap.css and bootstrap.min.css?
Please remove
bootstrap.css
And all is working nice.
<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Sluiten</span>
</button>
<h4 class="modal-title">Wachtwoord resetten</h4>
</div>
<div class="modal-body">
<p>Typ uw email adres</p>
<input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-custom">Herstellen</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Here is working fiddle
http://jsfiddle.net/qyo53dxh/1/
Add This into style tag
.modal {
background: rgba(255, 255, 255, 0.8);
}
.modal-backdrop {
display: none;
}1200;
I'm making an application form that's on a modal and I made it so the user can upload their picture on the application form. So I have my thumbnail with a "upload picture" bubble inside it, and when I click it, a modal pops up. However the problem is when I click on "cancel" or "upload" on my "upload picture" modal, it closes both modal windows (application form and upload picture).
I'm using bootstrap and here's a snippet of my code:
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Application Form</h4>
</div>
<!-- START OF MODAL BODY-->
<div class="modal-body">
<div class="col-sm-5">
<div class="thumbnail">
<div class="avatar">
<a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar">
<img src="img/face1.jpg" alt="...">
</a>
<!-- Upload new avatar bubble -->
<div class="avatar-bubble">
<i class="fa fa-plus"></i> Upload new avatar
</div>
</div>
</div>
</div>
<!--Modal for uploading photo-->
<div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4>
</div>
<div class="modal-body">
<p>Please choose a file to upload. JPG, PNG, GIF only.</p>
<form role="form">
<div class="form-group">
<label for="file">File input</label>
<input type="file" id="file">
<p class="help-block">Files up to 5Mb only.</p>
</div>
<button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div> <!-- END OF APPLICATION FORM MODAL BODY -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Basically I put my second modal within my first modal.
Although the Bootstrap 3 docs say "Overlapping modals are not supported..", I think I found a workaround that works. You need to..
Make sure your 2nd modal's markup is outside the body of the 1st modal
Manually close the 2nd modal by using the Bootstrap modal toggle method in jQuery.
Change the z-index of the 2nd modal so that it appears over the first.
http://bootply.com/108243
Also, I changed your markup to remove the fade and `display:none'.
I've opened a modal from another modal. I call it 'modalception'. It sounds like you just need to make sure your events are targeting the correct modal.
I have overlapping modals, and they work as expected. Clicking the background of the second modal closes that modal only, not the one behind it.
Just set the z-index correctly. Be sure not to nest them, and it should work just fine. It is not "supported", but I do it all the time. A project I am currently working on stacks 3 on top of each other with no problems.
I am using Bootstrap v3.3.2 and jQuery 1.11.2.