Twiiter Bootstrap Modal is not closing when click outside - javascript

Hi im using agency theme from boostrap but i customised the size of it but when click outside of it its not closing even the normal modal from bootstrap is not closing, (sometimes it close sometimes its note) ill show my bootstrap modal below:
<p class="buttonp "> <a href="#portfolioModal" class="portfolio-link" data-toggle="modal" data-dismiss="modal">
Click for more info </a></p>
</div>
<!-- Portfolio Modal 1 -->
<div id="portfolioModal" class="modal fade portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal" aria-hidden="true">
<div class="modal-content">
<!-- <div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="modal-body">
<!-- Project Details Go Here -->
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->

Issues with your code are:
You have put modal code inside some other element and not directly in body as per directons on Bootstrap Modals
You have resized your modal-body and modal-content so it is taking whole screen. Modals have a layer that occupies whole screen (modal-backdrop class) and above it they display the modal. This modal-backdrop class closes the modal when it receives the click but it can't do that now as it is covered by the modal dialog.
I think you may have wanted to have overlay over some element. Take a look at Example on CodePen
<div class="parent">
<div class="content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
<div class="overlay">Flower, Plants, Herbs, Trees.,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,</div>
</div>
.parent{
background:green;
position: fixed;
}
.content{
background: blue;
width: 100px;
}
.overlay{
position:absolute;
background: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Related

How to put content under fixed header or nav when opened in browser?

Hello I have problem when I make header using html and css. I have my header in fixed position, but the content is covered up my header. I want my content position under header when I run it. One more, I set header width 100% but it shift to the right so it doesn't cover up whole width on the screen.
[UPDATED]
<style>
#media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}
.box-1{
flex:2;
order:2;
}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}
.container-2-box{
flex-basis:20%;
}
.container-3-box{
flex-basis: 10%;
}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;
}
.whole-container{
margin-top:2.0rem;
}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>
Without seeing your HTML code it is a bit guessing, but I'll give it a go.
Adding a position: fixed to an element will make it flow above the other content. The element is taken out of the document flow. So the overlapping is natural behavior.
To prevent the content to be hidden, you should add a padding to the parent of the boxes. I'm guessing that when you add the following code, it solves the problem
body {
padding-top: 3rem; /* should be at least the height of the header*/
}
The second question about the position of the header can be fixed by the following code:
/* option 1, add a left position:*/
header {
...
left: 0;
}
/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}
body {
margin: 0;
}
body {
margin: 0;
}
header {
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
/*not cover whole width*/
margin: 0;
}
.whole-container {
margin-top: 2.0rem;
}
<body>
<header>
0000
</header>
</body>

How can i scroll one service section at a time while keeping the .service-inner element in the same place?

I'm trying to create a layout where the user will be able to scroll one service section at a time for ex if the user scrolls down from the first section i want the first section to fade out before the second section fades into the same place as the frist section was
here is a link to js bin Click [here] (https://jsbin.com/xubemivaso/edit?html,js,output)
#one, #two, #three, #four
{
padding: 0px;
margin: 0px;
height:100%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
font-size:3rem;
right: 0px;
left: 0px;
background-color:black!important;
}
#one {
top:0px;
}
#two {
top:100%;
}
#three {
top:200%;
}
#four {
top:300%;
}
.container-outer{
overflow: hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
position:relative;
}
.container-inner{
overflow:auto;
position:fixed;
width:100%;
height:100%;
padding:30px;
border:30px solid #131313;
margin:0px;
padding:0px;
}
.container-inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body itemscope itemtype ="http://schema.org/LocalBusiness">
<div class="cursor"></div>
<div class="cursor"></div>
<div class="container-outer">
<div class="container-inner" id="fullpage">
<nav>
<a class="careers">CAREERS</a>
<a class="services">SERVICES</a>
<a class="about">ABOUT</a>
<a class="find-us">FIND US</a>
</nav>
<div class="slogan">
<h1>SERVICES</h1>
</div>
<div id="one" class="outer section">
<div class="service-inner first">
<p class="service-title-first"></p>
<p class="service-para-first">
Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor
</p>
</div>
</div>
<div id="two" class="outer section">
<div class="service-inner second">
<p class="service-title-second"></p>
<p class="service-para-second">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="three" class="outer section">
<div class="service-inner third">
<p class="service-title-third"></p>
<p class="service-para-third">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="four" class="outer section">
<div class="service-inner fourth">
<p class="service-title-fourth "></p>
<p class="service-para-fourth ">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
</div>
</div>
<script>
(function(container){
$.fn.stopAtTop= function (serv) {
var $this = this,
$container = $(".container-inner"),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($(".container-inner").scrollTop() < thisPos) {
TweenMax.to($this, 0, {"position":"absolute","top":""});
setPosition = over;
}
};
over = function(){
if (!($(".container-inner").scrollTop() < thisPos) ){
TweenMax.to(serv.prev(".service-inner").find('.service-inner'), 1, {"opacity":"0"});
TweenMax.to($this, 0, {"position":"sticky","top":"0px"});
TweenMax.to(serv, 1, {"opacity":"1"});
setPosition = under;
}
};
setPosition = over;
$container.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$container.scroll(function(){setPosition();});
setPosition();
};
})($(".container-inner"));
$('#one').stopAtTop($("#one > .service-inner"));
$('#two').stopAtTop($("#two > .service-inner"));
$('#three').stopAtTop($("#three > .service-inner"));
$('#four').stopAtTop($("#four > .service-inner"));
</script>

side by side Inline-block divs, last one aligned in the middle wrongly

I'm aligning responsive divs side by side vertically in pairs. I'm using inline-block instead of floats. I cannot use flex btw.
In the example below I have 5 divs, but the last one (div5) goes in the middle instead of aligning to the left. I cannot understand why.
Any suggestion?
What happening is:
div1 div2
div3 div4
div5
instead of:
div1 div2
div3 div4
div5
The CSS and HTML:
div-container{
margin: 0 auto;
width: 95%;
}
div{
display: inline-block;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}
div:nth-child(2n+2) {
margin-right: 0;
}
<div class="div-container"><div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>
<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
</div>
Try adding text-align: left; to div-container
Try with this snippet, add text-align:center to the parent div , this will make the last div to be left
.all-box {
width:400px;
margin:0 auto;
text-align:left;
}
.box {
width:49%;
display:inline-block;
height:100px;
background:#666;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="all-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Try removing
margin-right: 4%;
margin-bottom: 4%;
for div tag

How to fit iframe and div in 100% height combined?

I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page.
As far as I researched, it will be possible only with jQuery. I tried CSS Flex without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>
</div>
</div>
</body>
</html>
Any idea?
Thanks
Working example with CSS Flexbox:
body,
html {
min-height: 100%;
height: 100%;
margin: 0;
}
.header-flex {
display: flex;
flex-direction: column;
height: 100%;
}
.map {
background: red;
flex: 1;
}
.footer {
background: blue;
}
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>

jQuery wrap closing tag until the same opening tag

I have this markup:
<h2>my title here</h2>
Lorem ipsum dolor sit amet
<h2>my title here</h2>
consectetur adipisicing elit quod tempora
I would like to select all the content between the closing </h2> until the next opening <h2> and wrap it as a div with a class, for example:
<h2>my title here</h2>
<div class="my-class">Lorem ipsum dolor sit amet</div>
<h2>my title here</h2>
<div class="my-class">consectetur adipisicing elit quod tempora</div>
var a = $('body').first().contents().filter(function() {
return this.nodeType == 3;
}).wrap('<div class="my-class">');
console.log(a)
.my-class{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>my title here</h2>
Lorem ipsum dolor sit amet
<h2>my title here</h2>
consectetur adipisicing elit quod tempora
DO something like this
$('h2').each(function(idx, elm) {
var $elm = $(elm);
// select text after h2
var next = $elm[0].nextSibling;
var val = next.nodeValue.trim();
// create div , add text to it
var $div = $('<div>');
$div.text(val);
// remove previously selected text nodes
next.remove();
// add divs after h2
$elm.after($div);
});
div {
color: blue;
font-size: 1.8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2>my title here</h2>
Lorem ipsum dolor sit amet
<h2>my title here</h2>
consectetur adipisicing elit quod tempora

Categories