I've read the many threads on this topic but none have answered the issue that I'm having. I am trying to create a modal view overlay that spans the page width. However, the modal renders but it isn't responsive. It is darkened out and buttons won't work. This is how I load my assets:
<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
And this the code I'm running on modal:
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
<div class="container-fluid">
<%= yield %>
</div>
</body>
</html>
And this is where I want it called from. And I think because I have an animation effect it might be screwing with the event. Note that this is the first thing within the yield:
<div class="container-fluid">
<div class="row"><div class="col-md-12"><h1>Title</h1></div>
<div class="row">
<div class="col-md-3">
<div class="menu-item-1 card effect_hover">
<a class="modal-link" data-toggle="modal" data-target="#basicModal">
<div class="card_front">
<span class="icon-home3 card_text"></span><br>ABOUT
</div>
<div class="card_back">
<span class="card_text">Learn all about our community!</span>
</div>
</a>
</div>
...
So, that's it. I've read the Documentation by Bootstrap and have copied the code into the page but the same issue remains. I've also tried using a local version of bootstrap assets. Thoughts?
I am trying to create a modal view overlay that spans the page width.
Well in that case, you'll have to edit the below line of CSS in the bootstrap.css (not recommended) or in your custom css file.
Here's the line:
#media (min-width: 768px) {
.modal-dialog {
width: 100%; // by default its 600px.
margin: 30px auto;
}
The Bootstrap carousel is built to be responsive, see the screen shots:
On big screens:
.
On smaller screens:
You must be having some content inside the modal which is not responsive or rather with a fixed width.
if you have a look at the styles for the modal, in bootstrap.css, you'll see that:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
The width is set to auto except when the screen-width is 768 or greater, in which case the width is set to.
width:600px;
Related
https://codepen.io/Maximusssssu/pen/mdPoKZe
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>
<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
<div class="modal-dialog" style="width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
<!-- Modal with tab -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Above code works fine. However, when the window is minimized, the width changes (not 100% anymore).
How do i fix the problem? Thank you for your attention.
try max-width: 150%; instead of width: 150%; that is
<div class="modal-dialog" style="max-width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
Working demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>
<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
<div class="modal-dialog" style="max-width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
<!-- Modal with tab -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I edit this answer ok?
the solution is to add a class with the following code and remove the inline-style
.myModal {
margin-left: 0
}
I just tried it and it works
the problem is that bootstrap adds a margin for those sizes, just set it to 0
remove the style="width: 150%;"
I use bootstrap 3.3.7 in my angular project and the modal is disabled when I open it by clicking "ADD CLASS".
My code is below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="add-class pointer" data-toggle="modal" data-target="#add-class-modal">
<img alt="+" src="assets/images/add.png" height="16px" width="16px" style="margin-top: -2px"><span class="add-a-class">ADD CLASS</span>
</div>
<!-- Modal -->
<div class="modal fade" id="add-class-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
The result looks like this.
"ADD CLASS" button is at the top right corner.
How can I fix it?
Probaby you have some styling which makes that background overlay has larger z-index. Make sure your modal class has correct styling and dont have some additional onces. it should work fine with default bootstrap styling. You can try setting larger z-index to .modal, but the key is to check if you dont have some additional styling applied.
// this is class for dialog itself
.modal {
position: relative;
z-index: 9999
}
If z-index is smaller than 1072 it can be covered by gray background
UPDATE:
Based on bootstrap example modal on bootstrap page, looks like that gray background is created by div with class mocal-backdrop, which by default have such z-index:
.modal-backdrop {
z-index: 1071;
}
I'm not having any luck using stellar.js. Below, I've included in HTML the div that I'm trying to have scroll at a separate speed than the rest of my webpage to give it the Parallax effect. After the HTML is also the CSS and the JavaScript and jQuery involved in the stellar.js.
<div data-stellar-background-ratio="0.5" id="faq1">
<div class="container-fluid anchor" id="faq">
<div class="row">
<h1>FAQ</h1>
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<!-- Large modal button -->
<button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Resume/CV</button> <!-- Large modal -->
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" data-keyboard="false" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="resume" src="pdf/resume.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
Next is the CSS for the code involved.
#faq1 {
background-image: url("../img/question.jpg");
background-attachment: fixed;
color: black;
height: auto;
width: 100%;};
Finally, the JavaScript file that's linked to the page contains all of my other JavaScript involved with the whole page, but includes:
$.stellar();
I've been using the code in jquery.stellar.min.js on the https://github.com/markdalgleish/stellar.js.
I've been reading the directions and using all sorts of configurations to get the code to work but it just isn't working. If somebody could help me with this or let me know if I'm doing it completely wrong, I would appreciate it.
How can I open an section of html with an id using JS/JQuery?
Lets say the html I want to trigger with JS/JQuery is
<section class="modal--show" id="show"
tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">A modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
<div id="badgeselect">
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</section>
I've tried using
$('#show').dialog('open');
which doesn't work. The only other consideration is, that the full code must also copy an image that the user clicks on (to activate show)
I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#show').dialog('open');
});
SaveMyBadge();
return false;
});
.dialog is not a native method available in JavaScript. If you want a modal out of the box then i recommend using a JavaScript Library which comes with such features built in. Twitter's bootstrap will be a good option.
To get started:
In your <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Include this script after you include jQuery
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
HTML:
<!-- Modal Markup -->
<div class="modal fade" id="modal">
<div class="modal-dialog">
<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">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
To launch the modal
$('#modal').modal({'show':true});
Bootstrap homepage
UPDATE:
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#modal').modal({'show':true});
});
You are missing a closing div tag.
<div id="badgeselect">
is never closed. That could be causing some strange issues
Well you could just add a click listener to the img and change the css class of the section.
The css class could have display:block
and as you stated its a pop up you could set its position in your class along with other properties such as opacity or simply
document.getElementById("show").style.display = block;
OR
document.getElementById("show").className = "MyClass";
.MyClass{
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-width/2;
margin-top:-height/2;
opacity:0.8;
}
This should create a pop up like feature.
How can I make a responsive HTML popup with Bootstrap 3?
HTML,
<div class="center-pane">
<div class="pane-left">
Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>
<div class="pane-right">
<form method="post" action="/login/">
<div class="form-group">
<label class=" required-field">E-Mail:</label>
<input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
</div>
<div class="form-group">
<label class=" required-field">Password:</label>
<input type="password" name="password" required class="form-control" id="id_password">
</div>
<button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
I'm desperated!
</form>
<div class="misc text-center">
Some text
<br>
CSS |
HTML5
</div>
</div>
</div>
CSS,
/* HTML POPUP
-------------------------------------------------- */
.center-pane {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
max-width: 1000px;
height: 320px;
border:1px solid red;
}
.pane-left,
.pane-right{
width:480px;
float:left;
border:1px solid blue;
}
.center-pane is responsive when I resize my browser window. but not .pane-left and
.pane-right - how can I make these two responsive as well?
EDIT:
if I use the model's solution, it seems more issues I need to tackle:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
the model dialog is not absolute vertically centre by default - how can I change that? also, how can i change the size of the dialog box then? and I need two columns - one left, one on the right to be responsive. how model can help me to do that. I can't see it in the documentation from bootstrap website. I would try to avoid to do any customization via js though.
also, you need to click on a button to trigger the dialog. I don't want to use the button to get the dialog box, I want to get the popup when the html doc is loaded. is it possible?
The width of the Pane-left and Pane-right must change dynamically when the browser is resized to make it responsive !
But if you provide it with a fixed width like width:value in px. The browser resizing wont have any effect on the div !
I recommend you to use inbuilt classes of BOOTSTRAP POPUP COMPONENTS ..
Learn more about BOOTSTRAP MODAL POPUPS -> HERE
Got my own solution with the columns method - col col-xs-6,
<div class="pane-left col col-xs-6">
Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>
<div class="pane-right col col-xs-6">
....
</div>