I am adding a close button by customizing the modal bootstrapping.
I want it on the right of modal for that I gave a 'position: absoluteorposition: fixedand modified thetopandright` it.
The problem is that in doing so the button becomes unusable. From what I gather, there is a conflict between the data-dismiss: modal (attribute that makes the element closing the modal) with the 'position: absolute`.
I tried other ways to make such "button" importing a .svg, create a <button>, <span> in addition to changing the position: absolute by float: right.
By doing so, only a small portion of the button area becomes the link to close and not the whole area. Experience in mobile and desktop is pretty nasty as it is necessary to press / click several times to find the right area, and the right is ALL button area to be a link to close the modal.
The following code snippet and to become more clear:
.close-modal {
position: absolute;
/* REMOVE `POSITION` AND THE BUTTON WORKS */
width: 75px;
height: 75px;
background-color: transparent;
right: 35px;
top: 25px;
cursor: pointer
}
.close-modal:hover {
opacity: .3;
}
.lr {
height: 75px;
width: 1px;
margin-left: 35px;
background-color: #222;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
z-index: 1051;
}
.rl {
height: 75px;
width: 1px;
background-color: #222;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
z-index: 1051;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a href="#modal" class="portfolio-link" data-toggle="modal">
CALL MODAL
</a>
<div class="portfolio-modal modal fade" id="modal" tabindex="-1" role="dialog" 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-lg-8 col-lg-offset-2">
<div class="modal-body">
<p>CONTENT MODAL CONTENT MODAL</p>
<p>CONTENT MODAL CONTENT MODAL</p>
<p>CONTENT MODAL CONTENT MODAL</p>
</div>
</div>
</div>
</div>
</div>
</div>
How I can solve this?
There is some another element stacked on top of your close button.
Setting z-index to a high value would make your dismiss button work.
This would make the close-modal button at the top and thus clickable.
You can do this by:
.close-modal{
z-index: 1100;
position: absolute;
...
}
Related
I am working on a portfolio website, for a product management and cloud profile, I am using a template as I am not a programmer:
https://github.com/codewithsadee/vcard-personal-portfolio
This is the portfolio I am using and this is my GitHub repo, with all my changes:
https://github.com/pranaysparihar/portfolio
In the 'Portfolio' section of my website, for every project, I want to open a pop-up window with the details of the project, but I am not able to work out how to code it, I am sure a modal should do the trick, it is a public repository so anyone around the globe should be able to take a look and hopefully contribute, would be great if someone could help me out here.
This is the current snippet:
<li class="project-item active" data-filter-item data-category="cloud projects">
<a href="https://google.com">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
</figure>
<h3 class="project-title">Arrival</h3>
<p class="project-category">Cloud Projects</p>
</a>
</li>
I have created a CSS stylesheet for a modal. The modal will always be in the middle due to "fixed" position. Furthermore I have added a onclick event on your a tags, to trigger the javascript function openModal and the new modal divs below your tag. You have to enter your data there, but at least you have an idea on how it can work. Finally see the script.js modifications on how the modal works.
If you have any questions feel free to ask.
CSS:
/*-----------------------------------*\
#MODAL
\*-----------------------------------*/
.modal {
display: none;
min-width: 200px;
min-height: 200px;
border: 1px solid var(--jet);
border-radius: 20px;
text-align: center;
background: var(--eerie-black-2);
z-index: 99;
padding: 16px;
color: var(--white-2);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.show-modal {
display: block;
}
/* The Close Button */
.close {
color: var(--white-2);
position: absolute;
right: 20px;
top: 0;
width: 10px;
font-size: 1.8em;
}
.close:hover,
.close:focus {
color: var(--light-gray-70);
text-decoration: none;
cursor: pointer;
}
/*-----------------------------------*\
#RESPONSIVE
\*-----------------------------------*/
index.html
<body>
<!-- modals-->
<div class="modal project-1">
<span class="close" onclick="closeAllOpenModals()">×</span>
<div class="content">Here is my modal text 1</div>
</div>
<div class="modal project-2">
<span class="close" onclick="closeAllOpenModals()">×</span>
<div class="content">Here is my modal text 2</div>
</div>
<!--
- #MAIN
-->
<main>
<!--
- #SIDEBAR
-->
Add onclick events to all your a tags within your projects
<a href="#" onclick="openModal('project-1')">
script.js - Paste it on the bottom of your file
function closeAllOpenModals() {
let modals = document.getElementsByClassName("modal");
if (modals) {
for (let i = 0; i < modals.length; i++) {
let modal = modals[i];
modal.classList.remove("show-modal");
}
}
}
//open modal
function openModal(project) {
//close all modals before
closeAllOpenModals();
let modalName = `.modal.${project}`;
//get modal
let modal = document.querySelector(modalName);
//check if modal is set
if (modal) {
//show modal
modal.classList.add("show-modal");
}
}
I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.
All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>
I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks
You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen
I have updated the previous issue and now this is the new issue I've encountered.
On http://www.christianluneborg.com website. Click on 'Website' link and then click on the 'Pure Network' image. You will notice the modal pops up and the background of the page scrolls back up to the home page. How do I stop that? It needs to stay on the 'Website' section of the page.
HTML -
<div class="image-wrap">
<img src="img/img2.jpg" alt="Pure Network">
</div>
Modal -
<div id="Modal-Pure">
<img src="img/website151.jpg" alt="" />
</div>
<div id="fade" onClick="lightbox_close();"></div>
CSS -
#fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.4;
opacity:.50;
filter: alpha(opacity=50);
}
#Modal-Pure {
display: none;
position: fixed;
top: 25%;
left: 35%;
width: 836px;
height: 636px;
margin-left: -150px;
margin-top: -100px;
background: #000;
z-index:1002;
overflow:hidden;
}
Javascript -
<script>
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
document.getElementById('Modal-Pure').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('Modal-Pure').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
Instead of triggering the modal using data-attributes, do it using JavaScript.
var myModal = $('#myModal');
$('img').click(function(){
myModal.find('img').attr('src', this.dataset.src);
myModal.modal('show');
});
#myModal img {
max-width: 300px;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189_960_720.jpg" width="100" alt="goat">
<img src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881_960_720.jpg" width="150" alt="beauty">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img />
</div>
</div>
</div>
</div>
Side-remark: id attribute should not be a number. Better to use data-attribute e.g. data-id to store the number. If you need to access it in the JS code, you would do this.dataset.id.
I finally solved the problem. I added a line of JS to stop background going to the top page when modal pops up.
document.body.style.overflow='hidden';
And added a line to enable the scrolling after hitting close link.
document.body.style.overflowY='visible';
I have a modal that pop-up on my page on click. It is perfectly centered in a browser view and smaller views. In the moment I make the page small as for phones the modal goes down the page and I have to scroll to see it. How can I fix this?
.nx-modal {
position: absolute;
padding: 20px;
background-color: #fff;
border-radius: 15px;
z-index: 1050;
width: 96%;
}
<div class="page-container">
<div class="container">
<div class="modal-dialog">
<div class="modal-content">
<!-- ko if: currentDialog() !== null -->
<div class="modal-backdrop fade in"></div>
<div id="Modal" class="nx-modal" data-bind="dsfsdfsdf"}" style="display: none;">
#* This is where dialog's content is loaded *#
</div>
<!-- /ko -->
</div>
</div>
</div>
Are there any other styles assigned to the modal that are overriding ? Like Media queries for instance ?You could try adding media queries for smaller screen and give your modal a top:0px and left:0px it might help in this case..
Try this
#media only screen and (max-width : 768px) {
.modal {
position: fixed;
top: 0;
margin:0;
padding:10px;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
width: 96%;
}
}