How to create a modal popup using javascript and CSS - javascript

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?

Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.

I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Related

How to toggle classes of iframe in javascript?

This is the iframe (a chatbot html page) , which I am calling in another HTML project. So, i need to toggle the classes (shown below) as an onclick event or by any other functions
chatbot html page=> there is a logo, which I placed in bottom right and when someone clicking on that logo, a form div is opening... this project I'm calling in another project inside iframe
<iframe id="overlayDiv" class="overlayDiv" src="http://127.0.0.1:5501/index.html" frameborder="0"</iframe>
classes for toggling
<style>
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDivActive {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
</style>
for that , below functionality is not working
$(document).ready(() => {
$('#overlayDiv').click(function (e) {
$('#overlayDiv').toggleClass('overlayDivActive')
})
})
I'm a little unsure what you're trying to achieve exactly. You can make use of
//js
document.getElementById("overlayDiv").classlist.toggle("someClass");
//jQuery
$(".overlayDiv").toggle();
if that is what you're referring to.
You may or may not find this to be useful as well: https://www.w3schools.com/tags/tag_details.asp
I hope this helps a little bit since you've given minimal examples
You can use either of these two options and it will work for you. The important thing is that you order well what you have to do.
This would be using Javascript
document.getElementById("overlayDiv").classlist.toggle('active');
This would be using jquery
$(".overlayDiv").toggle('active');
This will add the 'active' class to your tag, so now you can work on your css like this
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDiv.active {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
The toggle is a very powerful tool that you will use more than once in projects.
I hope this helps you.

google maps into circular div

I need to put a google maps into a div and this one must be a circular div, but I've two problem
at load time I see standard rectangular div and after half second this div became circular
when use this map in draggable way I see always a standard div and only after mouse leave I see circle again
I think that the main idea is the order of loading files in your site: html, css, js.
Take a look at this: http://jsfiddle.net/nfng1sm4/
. You only have to change the background color in to the color of your container div.
.circle-text, #googleMap {
width: 500px;
height: 380px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;}
adding css position: relative;, z-index: and border-radius to the parent div of the map holder, it will mask the child div(#mapCanvas)
Fiddle demo
css
.mapCover {
position: relative;
width: 300px;
height: 300px;
border: 5px solid #000000;
border-radius: 400px;
overflow: hidden;
z-index: 1000;
}
#mapCanvas {
width: 300px;
height: 300px;
}
html
<div class="mapCover">
<div id="mapCanvas"></div>
</div>

How to add button inside textarea using Javascript?

My client wants me to create a textarea inside where there has to be a button like the below picture:
Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.
This has to be work like this 2nd picture on-click (like drop down):
Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.
To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
<div class="textarea-container">
<textarea name="foo">Some content here...</textarea>
<button>Menu</button>
</div>
I'll leave the styling for you to finalise as required.
Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
<div id="textarea_container">
<textarea name="text"></textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>

Hide the scrollbar behind fixed positioned div

I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle
You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/
I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/
Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!

CSS margin-top and top are not bound

I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;

Categories