I have a simple bootstrap popup modal. Right now when the popup appear, the close x button is at center and I want to align the close button x to the right corner of the popup window. How can I do this?
<div class="modal fade" id="checkNameSurvey-modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container" id="checkNameSurveymodal-container">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="text-align:center"></h4><br>
<div>
<input type="text" class="form-control login-input" id="newSurveyName" onkeyup="if(event.keyCode==13)document.getElementById('checkName-button').click()">
<button type="button" class="btn btn-primary" id="checkName-button"></button>
</div>
</div>
</div>
</div>
Try using 'modal-header', 'modal-content' classes. Go through UI DIALOGS
here inspect element in the modal.
You can use float:right. That might shift the cross button to the right side.
Sharing a screenshot of the modal box would have been more helpful.
sorry, I found a mistake, the close x button is align at the center because I put it inside of my class "loginmodal-container" which I have a stylesheet of center. So I fix that problem. Thank you
Related
I have a modal with two columns in it. One of the column contains a table. However, the table does not fit into the column and need to scroll horizontally, but I need to make the table fit into the column. Also, I have problem with the scrolling issues. Table should be can scroll if the items is more than the size of the modal.
Here, the link of example:- https://jsfiddle.net/35wzenqf/2/
Please change the view to tabs(row) easier for you to see the columns in modal :)
<div class="btn-group d-flex">
<button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
<span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
<span class="btn-inner--text">Pay</span>
</button>
</div>
Thank you for anyone helping!
Thanks Ferikeem and Hamid for helping!
These are the answers for my questions:-
Change modal-lg to modal-xl, in my code it doesn't works I don't know why so I added style="max-width: 1140px" for my modal-dialog class. It's the same size as modal-xl in bootstrap.
For the scrolling, I need to set the height.
.horizontal-scroll
{
overflow-y: auto;
height: 70vh;
}
Increase the size of the medal
enter link description here
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
...
</div>
</div>
</div>
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 all,
I am using modals on my website and the scroll area containing them do not fit the page.
See on the screenshot.
I am not applying any additional style to the modals and I can't figure out where does the problem come from.
I am sorry it is hard to post code because I am not sure which part might cause this and the code base is relatively large..
EDIT: Sample modal
<div class="modal fade" id="addSpotModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" onclick='addSpot.cancel()'
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add a spot</h4>
</div>
<div class="modal-body">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick='addSpot.cancel()'>Close</button>
<button type="button" class="btn btn-primary" onclick='addSpot.sendAddSpotRequest()'>Save changes</button>
</div>
</div>
</div>
Any idea?
Thanks. Olivier
Firstly, the scroll is based on the modal itself, so as you can see, the rounded corners are not visible. The content inside the modal is pushing the size to be larger than the viewing area. You could try the size utilities like modal-lg on the dialog (<div class="modal-dialog modal-lg">) if you haven't done so. You can also change the dimensions through LESS/variables. The #modal-lg, #modal-md, and #modal-sm. To decrease the top margin, you would need to adjust the CSS for modal-dialog as 30px is the default.
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.