How to Make Info Boxes Appear on Website on Click - javascript

On certain websites, when a link such as "read more" is clicked, a popup box will appear, and the behind webpage will often darken. The popup box then contains information and can be closed by clicking a button in the corner.
I'd like to make several of them. Would I do so simply by creating a div and pehaps another one with a transparency to "darken" the webpage behind the popup or is there a code I could use in javascript?

Generally people here are suggesting lightboxes, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css files and .js files, when your problem could be solved via CSS and JS.
Check out this fiddle: http://jsfiddle.net/3vmL6/1/
In your code you have a a simple div of a class modal-dialog, which is automatically hidden in the css (see the fiddle).
<div id="info-modal" class="modal-dialog">
<div>
x
<h2>Hello!</h2>
<p>You can display any information you want here!</p>
</div>
A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique divs using different ID's, but all belonging to the same class.
$("#click-me").click(function () {
$.ajax({
success: function (data) {
console.log(data);
$('#info-modal').addClass("show");
},
async: true
});
});
$(".modal-dialog .close").click(function(){
$(this).closest(".modal-dialog").removeClass("show");
});

If you're doing it yourself, you'd put an overlay over the entire page and give it a high z-index so that it will cover all of your dom elements. Then have a div, with a higher z-index positioned where you need it to be with the content you want.
An easier approach is to use a library that already has that functionality baked in
jQuery UI dialog - http://jqueryui.com/dialog/
bootstrap modal - http://getbootstrap.com/javascript/#modals

I believe this is what you are looking for: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

What you are looking for is a lightbox/modal box. I recommand Magnific Popup because it works with responsive design, but colorbox is also very good.

You essentially are looking to work with modals so. Zurb provide a library to do just this for you in foundation. The library is called reveal. It's simple to use. I use it a good bit. You can see it here. Hope that helps.
http://zurb.com/playground/reveal-modal-plugin

This code should do what your asking for
window.onload = function() {
document.getElementById("member").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
<div id="overlay">
</div>
<div id="popup">
your readme text in here
</div>
#overlay
{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;
top:40%;
width:600px;
height:500px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}

they are called modals or dialogs, there are several frameworks that will help you in this case.
one of the most popular is bootstrap
http://getbootstrap.com/

Related

How to put this div in center and lock everything else with light blue background

I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/
Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.
This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.
I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos
try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();

HTML, JavaScript: Frameless Windows

How to produce frameless window in HTML5, JavaScript, please?
I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.
By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars... It looks like a standalone image with painted close button.
Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?
EXAMPLE:
As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.
The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.
just for quicks to show the concept ..
create two divs directly under body
<div id="backmask"></div>
<div id="contentwindow"></div>
<!-- somewhere else in your page -->
click me
css for these ( roughly )
<style type="text/css">
#backmask {
display:block;
width:100%;
height:100%;
background-color:black;
position:absolute; top:0; left:0;
z-index:1000;
display:none;
opacity:0.7;
filter:alpha(opacity=70);
}
#contentwindow {
display:block;
width:800px;
height:600px;
background-color:white;
position:absolute; top:50px; left:50px;
z-index:1001;
display:none;
}
.bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
</style>
and then ( im using jquery for quicks )
<script type="text/javascript">
$(".showinwindow").click( function(e) {
/* we don't want the visitor to leave, stop the normal action */
e.preventDefault();
/* get what to show */
var contenttoload = $(this).attr.("href");
/* set the body up */
$("body").addClass("bodywithwinOpenClass");
/* show wins and masker */
$("#backmask").css("display","block");
$("#contentwindow").css("display","block");
/* load the content */
$("#contentwindow").load(contenttoload);
});
</script>
this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find
the reverse is needed to "close" it
no frames
That's your decision to use (i)frames in your document or not
no scroll bars
With CSS you can suppress scroll bars, or build a layout which resizes exactly to the window size
no status bar, no minimize, no close, no roll bars...
That is possible with chrome-feature descriptors when creating a popup with window.open. Yet, you will not be able to create unclosable windows, hiding the close buttons also requires some privileges.
You seem to want a fullscreen application. Have you considered using the new fullscreen API?
http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- pretty much covers all you can do - you can't launch a chromeless browser window from a web page.
What are you trying to achieve?
That's easy enough - it's not a window - it's actually a div on the page floating over the rest of the page content - there are plenty of ways to do it with a framework like jQuery.
Tutorial
Essentially all you need is a hidden positioned div with a high z-index and a bit of script to show/hide it:
<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>
<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>

An impressive responsive javascript effect. How to do it?

recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:
http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.
As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!
This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/
I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)
The More Content part, could be implemented by pure css, without any javascript. with this structure;
<div class="thumb">
<div class="img"></div>
<div class="content"></div>
</div>
and have this css present;
.thumb{
display:block;
width:100px;
height:100px;
}
.thumb div{
position:absolute;
width:inherit;
height:inherit;
}
.thumb div.content{
opacity:0;
}
.thumb:hover div.content{
opacity:1;
}
or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.
Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/
At least thats how i would do it. Let me know if you want me to elaborate
Some example code:
$(function(){
$('.thumbnail').click(function(){
var $this = $(this);
var $divToShow = $this.nextUntil('div.container');
//fetch the divs content via ajax or however u want to do it here...
$divToShow.stop(true, true).slideToggle();
});
});
I would try http://api.jquery.com/slideDown/ for the very basics...
after that... it's just a mix of imagination and good taste :)
There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide
If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.

facebook like & send button flyout direction

How can I set the direction of the facebook "flyout" on the like or send button. We currently float our facebook social plugins on the right side of the page. But, when someone opens the facebook "flyout" it opens right, expanding the page when ideally it would open to the left.
Example: http://compfight.com
I promise, we don't need you to like the site:) Any help would be greatly appreciated.
<div class="side-right">
<fb:like href="http://compfight.com" send="true" layout="button_count" width="150" show_faces="false" action="recommend" font="" class=" fb_edge_widget_with_comment fb_iframe_widget">
</div>
The class side-right has a float:right; and text-align:right attached to it.
Try adding this style to your page:
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>
You can HIDE the flyout if need be, as in Firefox where the flyout can push the content out of position (we had a LIKE button in a jQuery slider in a sidebar, and each LIKE clicked was pushing the sidebar image out of the frame.
Using Andrew's CSS from the post above, I found that a simple display:none did the trick.
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
display:none;
}
</style>
That precented our content from being forced upwards and out of frame.
No support for this at the moment as everything is within an iframe and out of your app's control.
Subscribe to the official bug to get updates on the issue:
https://developers.facebook.com/bugs/1420124294938118/
You can't customize the location of the fly out window but see my alternative here.
Facebook send button flyout
does not do it automatically?
http://jsfiddle.net/Zf7mY/
example with
.fb-like { float:right; }
I just added fb like to div with overflow:hidden...
Add comment to your like is not so important to destroy your web design, you want that like, comment is just bonus ;-)

jquery html() not working on positioned element in Chrome

I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:
<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">
<div style="position:fixed; top:50%; left:0; width:100%;">
<div style="height:150px; width:300px; margin:auto;">
<div>Processing</div>
<div>
<p id="dialog">Please Wait...</p>
</div>
</div>
</div>
</div>
Note I am calling:
$('#modal').show("fast");
before trying to add content to it.
Then I try to add to the dialog paragraph like so:
$.post(
'processor.php',
queryString,
function(data){
alert('data:'+data);
$('#dialog').html(data);
}
)
It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.
Anyone know why this is not working? or have a fix?
P.s. I know I should move my styles to a style sheet, I usually do that at the end.
Update
I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.
Also I am calling this in document.ready
You can see the page here click the submit button on the very bottom to see it happen.
update2
This is working correctly in FF and IE, its only not working in chrome.
if you view the console log, the text is there. try add css to the dialog something like :
#dialog { display:block; width:auto; height:auto;}
$(document).ready(function() {
// do stuff when DOM is ready
//Is your code called inside here or after this function is executed?
//If not, it should be.
});
Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:
$('#mydialog').hide("slow",function(){
$('#mydialog').html(data);
$('#mydialog').show("slow");
});
It doesn't look very elegant tho. I would prefer a better fix if someone has one.
edit:
A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.

Categories