open one modal and disable the other on page load - javascript

I am stuck in a small but weird problem. I have two modals on my page, I want to load the first modal when the page loads, I have done the code to click a button and open the modal but both the modals come up. It has a effect of opening from left to right, I want to keep that so I had added the class in the jquery code. I just want to load the modal that has the id="ModalLogin". As you can see both the modals load when button is clicked. Below is the snippet. Please help.
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});
<!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">
<link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/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>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
<li>Select2 </li>
<!-- <li>Activate Modal</li> -->
<li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
</ul>
<!---- Forgot Password Popup --->
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slider 2</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<button class="btn btn-primary">Option 4</button>
</div>
<div class="form-group">
<button class="btn btn-primary">Option 5</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!---- Forgot Password Popup --->
<!---- Login Popup --->
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Text Sample 1</h4>
<h4 class="modal-title" style="color: black;">Text Sample 2</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="comparelist.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
<li class="module form-check-label" style="background: #668693;"><span>Option 2</span></li>
</ul>
</div>
</div>
</div>
</div>
<!---- Login Popup --->
</body>
</html>

I would like to offer another way to use modals: pure CSS.
here is the reference: click here
The idea is you don't need any js,
each modal will be in a div wrapper with id. like this:
<div id="modalWrapper">
and then you will have a hyperlink where ever you want
<a href="#modalWrapper">
and the trick is with CSS -
you initially set the position of the modal as absolute and unseen (left:-999em)
and then with the target selector, you bring the modal to the center:
#modalWrapper:target {
left:0;
transition:etc..
}
and when you do like this - you will open only the desired modal with the button.
hope this will make some help for you.
my first answer on SO

Related

if i click on input field the popup modal opens and after selecting a item it reflect to the clicked input field

The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How do I create a blurred and transparent Bootstrap modal header and left modal sidebar that show behind to the site?

Not sure if it is possible, but is a cool idea I'd like to try, is it possible to make the modal header (where the title and close button are)'s background to be blurred (transparent) and show through to the site, and if so, is it possible to create a sidebar on the left side of the modal, that also is transparent and blurred and shows through to the site?
Is it possible to do this only with JS, Bootstrap, HTML, and CSS.
Currently my modal is like this:
<div class="modal fade" id="modal-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="
box-shadow: 10px 10px 40px 10px rgba(1, 1, 1, 0.37);">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<h3><br>    Content</h3>
<br><p>     Paragraph.</p>
   Link<p></p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Text and links were changed to generic for privacy reasons.
as per your question/comments, the following code has blurred sidebar & modal with transparency so that you can see the site at the back... you can apply the class myBlurTransparentEffect to any element that you'd like to blur... Happy coding and learning !!
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
.myBlurTransparentEffect {
filter: blur(1px);
background: transparent !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right myBlurTransparentEffect" style="display:none" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
Link 1
Link 2
Link 3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
</div>
<!-- Page Content -->
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
<img src="https://www.akberiqbal.com/Jumbo.jpg" alt="stack Overflow" style="width:100%">
<div class="container">
<h2>Modal Example</h2>
<!-- The Modal -->
<div class="modal " id="myModal">
<div class="modal-dialog">
<div class="modal-content myBlurTransparentEffect">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="w3-container">
<p>This sidebar is hidden by default, (style="display:none")</p>
<p>You must click on the "hamburger" icon (top left) to open it.</p>
<p>The sidebar will hide a part of the page content.</p>
</div>

Button next to collapsible moves with text, should be on the bottom

I've been learning bootstrap so I've been making a website to practice with it. I have a large red collapsible which displays some text when clicked on. I have a button next to it that moves below the text when clicked on, when I would like it to be on the bottom of the red button, and when the collapsible is clicked on, have the text come between the two buttons. I'm not sure how to move the button below and have the text come between.
EDIT: Bonus points if you can help me figure out why the "X" button on the modal is left of modal texts
https://codepen.io/anon/pen/Nwajax
HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
<button data-toggle="collapse" data-target="#main_collapse" class="btn-danger" id="coll_button">Collapsible</button>
<div id="main_collapse" class="collapse">
<h1>Some pretty neat random text that just appears when you click on the collapse thing</h1>
</div>
<!--Start modal-->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End modal-->
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu drop1">
<li class="drop1">Dropdown 1</li>
<li class="drop1">Dropdown 2</li>
<li class="drop1">Dropdown 3</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</body>
</html>
Here is a codepen (view should be changed to have display on the right/left, bootstrap is a bit weird with it) Thanks for your help.
Joel,
The button next to the collapsible is disappearing from view when you click on the collapsible because the size of the text in between is h1. Change it to a smaller size for eg. h6
<h6>Some pretty neat random text that just appears when you click on the
collapse thing</h6>
Also, the reason why you are seeing the close button on the model before the heading is because of way the markup is constructed. you have the markup for the button first followed by the heading change it to heading first followed by button like this:
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>

More than one modals get stuck in loop, Bootstrap

I've recently been having a problem with modals in Bootsrap 3.
I'm working on a test website (not anything I would actually put on the web) and have 3 pictures (each in a col-md-4) next to each other, and I am planning on having one button centered under each picture which can be clicked for a modal to show up with more info.
I set up the first modal, which worked perfectly.
However, when I added the second one, I found that when you click either button, both modals show up on top of each other, (the second one first) and when you press "Back to home", it goes to the other modal.
You can only go back to home by pressing the "X" one or two times.
I am almost certain that this is due to my JavaScript in <head> being very incorrect, but I am not very good at JS and have no idea what I did wrong...
Here is the html so you can inspect my handiwork:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#chimechoModal").modal('show');
});
});
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1) Even though you are using inline javascript, there is no need to define the <script> tag twice
2) This line in your code says that whenever an element in your DOM with the class 'btn' is clicked it will perform a function (open a modal in your case). You are listening to both the 'btn' elements' click events.
$(".btn").click(function(){
You can assign a different class to each button for each modal type. For example,
<script type="text/javascript">
<button type="button" class="btn btn-primary btn-chimecho" data-toggle="modal" data-target="#chimecho">
<button type="button" class="btn btn-primary btn-eevee" data-toggle="modal" data-target="#eevee">
$(function(){
$(".btn-chimecho").click(function(){
$("#chimechoModal").modal('show');
});
$(".btn-eevee").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
It's because you're using .btn (a common class shared on both buttons) to trigger the modal. So when you click on any .btn, it fires both modals.
Either add a class/id or use the data-target attribute on your click handler to fire the appropriate modal, or since your button is right before the modal element in your html, you can just use a single click handler with $('.btn') and fire the modal via $(this).next().modal().
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function() {
$(".btn").on('click',function() {
$(this).next().modal("show");
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap Modal Position issue

I want to divide the screen as left menu and main menu with Bootstrap.
Left Menu will be "col-md-2" and Main Menu will be "col-md-10" and I'd like to make main menu as a overlay screen.
For this reason, I am using bootstrap modal. As you can see in my below code:
1-) I cannot use "col-md-xx" class into Modal class
2-) If I set the 80% width to class="modal-dialog", it is nearly working but left position is being wrong
3-) Therefore, I am setting the modal position with jQuery but it is still now working properly.
I know that it is very diffucult to explain but if you check the below code I suppose you will understand the situation.
Do you have any suggestion to fix this issue?
Thanks in advance.
<html lang="en">
<head>
<title>-</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#leftmenu,
#mainmenu {
border-style: solid;
}
</style>
<script>
var aa = 1;
$(document).ready(function () {
$("#myModal").modal({
backdrop: 'static'
});
$("#myModal2").width($("#mainmenu").width());
$("#myModal2").offset({
left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number)
})
});
</script>
</head>
<body>
<div class="row">
<div id="leftmenu" class="col-md-2">Left Menu</div>
<div id="mainmenu" class="col-md-10">
Main
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div id="myModal2" class="modal-dialog" style="width:80%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info btn-lg" id="myBtn2">Open Modal2</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
CSS:
.left-zero {
margin-left: 0 !important;
}
Change into HTML:
<div id="myModal2" class="modal-dialog left-zero">

Categories