Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
Here is the setup, I have multiple divs on a page which are full widths and have blocks of color. The number of divs can vary from page to page. Each div with have a class associated to it (light or dark) and I have a logo pinned to the top of the browser window.
What I am trying to accomplish is this. I want to detect when each on of these div (with a common class) reach the top of the browser window. I then want to see if it has a light or dark class (only this div that just reached the top.) and then change the logo on the page depending on that value.
The closest thing I have come across is some onscreen jquery plugins that will add an :onscreen value to the current div that is on the screen. This would be great if I could only add this onscreen attribute when it reaches the top rather than just into view.
Does anyone have any suggestions as to how one might accomplish this?
// jsfiddle example
http://jsfiddle.net/UhrrR/
Funny, I was just looking at a library that does this very thing:
http://imakewebthings.com/jquery-waypoints/
You can add listeners to your elements that will fire off when your element hits the top of the viewport:
$('#myDiv').waypoint(function() {
var color = $(this).css('background-color');
$('img.logo').attr('src', 'logo.png');
});
For an amazing demo of it in use:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
I completely agree with Chris Hardie that Waypoints is the way to go. I built a simple example based on your description.
https://github.com/imakewebthings/jquery-waypoints
http://codepen.io/cgspicer/pen/FrCgI
Here is the fiddle, I've used my own, because I've started before you posted your fiddle, but the idea is pretty the same.
I have a position of a logo element, and when scroll happens I check whether one of the desired blocks intersects logo block. On success a class from a custom data-trigger-class attribute is assigned to a logo element.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have a website where I want to achieve the following behavior:
if someone clicks on a particular item (image or swf) everything else on the page would either disappear or blur out.
this way the only thing left on the page that is visible is the thing that was just clicked
Is this possible to make everything change except this one div?
Generally speaking, this effect is achieved by setting the z-index of the 'selected' item to a very high value, then adding a position:fixed div to the page that covers the entire page and has a z-index just lower than the selected item. It's generally referred to as a 'modal div'. Searching for 'modal' along with your JS framework of choice will return you a number of usable solutions almost out of the box.
I think you want a modal. Check out the jqueryui dialog widget's modal option:
http://jqueryui.com/demos/dialog/#modal