Bootstrap Modal Position issue - javascript

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">

Related

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>

open one modal and disable the other on page load

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

event propogation when opening bootstrap modal

I have a bootstrap modal button inside a div. I want it so that when I click on the button the modal opens but it ignores any programming for the outside div. I can get this to work using event.stopPropagation(); but the modal won't open. Can anybody see how to fix this?
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<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>
</head>
<body>
<div id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<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>
</div>
<script>
$(document).ready(function(){
$("#testdiv").click(function(){
alert("Only show when the outside area is clicked")
});
});
$(document).ready(function(){
$("#openmodal").click(function(){
event.stopPropagation();
alert("Open the modal and only show this alert")
});
});
Open the modal on button click and remove the modal reference from the button that is remove data-toggle="modal" data-target="#myModal".Use .modal('show') to open the modal on button click
$(document).ready(function() {
$("#testdiv").click(function() {
alert("Only show when the outside area is clicked")
});
$("#openmodal").click(function() {
event.stopPropagation();
$('#myModal').modal('show');
alert("Open the modal and only show this alert")
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<div id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" type="button" class="btn btn-info btn-lg">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<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>
</div>

How to display div on click inside Bootstrap modal?

I have a ussual modal window of Bootstrap and there I have a div which is hidden by default. I want to click on link (which is also inside this modal) and display it. Problem is that I could't make click on link and therefore my div still hedden.
Maybe someone had same problem or can give me good advice how to solve this task?
sorry that I did't post the code before I asked
<div class="modal fade js-custom-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
</div>
<div class="modal-body">
<div class="f-item f-item-modal">
<!--./f-item__details-->
<div class="f-item__info">
<div class="f-item__head modal-view">content</div>
<div class="f-item__short _border">content</div>
<div class="f-item__requirements">content</div>
<div class="f-item__body">
<div class="f-item__dest">
<i><img src="....png" alt="route"></i>THIS MUST DISPLAY div.f-item__map
</div>
</div>
<div class="f-item__map">
<iframe src="..." frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="f-item__footer modal-view"></div>
</div>
</div>
</div>
</div>
</div>
</div>
here is my jQuery code
$('a.display-route').click(function(e){
e.preventDefault;
$('.f-item__map').toggleClass('js-route');
});
at CSS
.js-route { display: block;}
I have tried it. Please have a look.
$(document).ready(function(){
$("a.insidemodal").click(function(){
$("div.abc").css("display","block");
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- 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 class="modal fade" id="myModal" 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="insidemodal">Some text in the modal.</a>
<div class="abc" style="display:none">I am hidden unless clicked by an anchor</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
You have to give us more details. But classical problems here could be a delegation event problem with your link.
Ask you this question: Does your link exist at the moment you add the on("click" ... ?
$('#link').click(function() {
$('#div').css('display','block');
});
This is just an example. Its better if you can post your code here.

Create Sliding effect inside Bootstrap modal

I want to slide some content inside modal window when a button is clicked. The effect which I want is a sample slider like effect which can be found here:
I tried to do width toggle but unfortunately it results different from I expect and more important is that the height of the modal changes when content slides. I need to be simply just one content slide out and the other slides in. JQuery UI has an slide effect But I do not want to use that because of technical details. I want to implement a JQuery + CSS solution.
Can anyone help me please? Here is the code I developed.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" 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">
<div class="first-content">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info first-button">First Button</button>
</div>
<div class="second-content" style="display:none">
<p>Second content</p>
<button type="button" class="btn btn-info">Second Button</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function () {
$('.first-button').on('click', function () {
$('.first-content').animate({width: "toggle"}, 800);
$('.second-content').delay( 800 ).animate({width: "toggle"});
});
$('.second-content').on('click', function () {
$('.second-content').animate({width: "toggle"});
$('.first-content').delay( 800 ).animate({width: "toggle"}, 800);
});
});
Update to previous answer.
This will give you a slide in left/right module for the modal overlay.
You can tweek the main overlay height setting.
https://jsbin.com/wolijunogu/edit?html,css,js,output
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<button type="button" class="btn btn-info openModal" 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">
<div class="first-content">
<p>Some text in the modal.<br>test for different height<br>test for different height</p>
<button type="button" class="btn btn-info first-button">First Button</button>
</div>
<div class="second-content" style="display:none">
<p>Second content</p>
<button type="button" class="btn btn-info second-button">Second Button</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.modal-body div p{
overflow: hidden;
}
.first-content{
width: 100%;
float:left;
}
.second-content{
width: 100%;
float: right;
}
Javascript:
$(function () {
$(".openModal").click(function(){
setTimeout(function(){
var h=$(".modal-body .first-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .first-content p").css('height',h+'px');
},250);
});
$('.first-button').on('click', function () {
$('.first-content').animate({width:"toggle"}, function(){
$('.second-content').animate({width:"toggle"});
var h=$(".modal-body .second-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .second-content p").css('height',h+'px');
});
});
$('.second-button').on('click', function () {
$('.second-content').animate({width:"toggle"},function(){
$('.first-content').animate({width:"toggle"});
var h=$(".modal-body .first-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .first-content p").css('height',h+'px');
});
});
});

Categories