Develop Reference

Show/hide a DIV with javascript fails - dialogbox locked

I have this ASPX:
<div id="IsAccountingOk" class="modalDialog">
<div>
X<br />
<asp:Label ID="lblIsAccountingOkHeader" runat="server" Text="Kassekladde:" Font-Size="Large"></asp:Label><br /><br />
<asp:Label ID="lblMessage" runat="server" Text="Der skal først vælges regnskabsår!"></asp:Label><br />
<br />
<asp:Button ID="btnIsAccountingOK" runat="server" Text="Ok" OnClick="btnIsAccountingOK_Click"/>
</div>
</div>
And the following CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
My intention is to show the DIV as a dialogbox - but the dialogbox is totally locked and I can't acccess the elements inside it and the closebutton too. Furthermore is it possible to access the rest of the controls in the background - which not should be accessed.
I think I have to deal with the 'pointer-events' selector - but I don't know how to do it :-(
Thanks in advance.
Regards, Michael
(I have updated my CSS in according to the opacity style selector.)

You are setting the wrong style property of the element, you should set the opacity to show the element:
$(document).ready(function () {
document.getElementById('IsAccountingOk').style.opacity = 1;
});
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;1
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
--color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="IsAccountingOk" class="modalDialog">
<div>
X<br />
<asp:Label ID="lblIsAccountingOkHeader" runat="server" Text="Kassekladde:" Font-Size="Large"></asp:Label><br /><br />
<asp:Label ID="lblMessage" runat="server" Text="Der skal først vælges regnskabsår!"></asp:Label><br />
<br />
<asp:Button ID="btnIsAccountingOK" runat="server" Text="Ok" OnClick="btnIsAccountingOK_Click"/>
</div>
</div>

You can use hide or show functions in jQuery.
or if you want to set animate , use fadeOut (hide) or fadeIn(show).
first , you have to hide element . so :
Example for hiding element :
$('#exampleID').hide();
or
$('#exampleID').fadeOut();
if you want show element use this :
Example for showing element :
$('#exampleID').show();
or
$('#exampleID').fadeIn();
Notice : use jQuery 3xx . replace your element's ID with exampleID.

Modal Window with scroll bar

So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/

CSS modal windows flashs onload

I want to make a pure CSS modal window, I found this example.
my problem is that the modal windows is shown quickly then disappear on load. when I clic, all is fine. WhenI try the sample olone, it works great, but when I embed it into my huge code, I see this flashing modal window
How can I stop it to do that flash onload ?
HTML
Open Modal
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
</div>
</div>
My CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

I changed your fiddle a bit. Instead of transitioning the opacity I put the transition on the background, transitioning the rgba from
background: rgba(0,0,0,0.0);
to
background: rgba(0,0,0,0.8);
I also removed the opacity entirely. Hopefully this will work in your environment.
Fiddle: http://jsfiddle.net/GG9Sa/1092/

Modal box after conditional statement in php

I've found in this link a modal box written in CSS and HTML5 and I would like to display this after instruction statement written in php, for example:
<?php
$a = 1;
$b = 1;
if($a==$b)
{
echo 'a=b';
} else {
DISPLAY MODAL BOX;
?>
How to do this?

you can use following:-
<?php
$a = 1;
$b = 1;
if($a==$b)
{
echo 'a=b';
} else { ?>
<!-- here you can write your modal html.... -->
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<?php } ?>

Modal Window with HTML5 and CSS

I am following a tutorial found here and I can't seem to get it to show up. I am using a bootstrap enabled website so I am not sure if that is the problem. I've been at it for two hours and can't seem to get anywhere. My button that I want users to click on in order to bring up the popup looks like this: Contact Me The framework for the popup looks like this:
<div id="openModal" class="contactus">
<div>
X
<h2>Title</h2>
<p>Content</p>
</div>
</div>
The CSS document looks like:
.contactus {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.contactus:target {
opacity:1;
pointer-events: auto;
}
.contactus > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
I have JavaScript enabled on my browser it if you click on it, you can't scroll up on the page unless you press "Esc" so I think it's puling up, you just can't see it. I was thinking it had something to do with z-index: 99999; but I don't know what that does exactly.
Any ideas??