I need a popup that automatically comes up in the index page of my website. It needs to be close-able by the user and must accept HTML/JavaScript languages inside the popup. Lightbox does this with images but doesn't have the auto popup feature. I have searched around on the net for something to work but I guess I am not entering the correct keywords
NOTE: I am not looking for a JavaScript popup that opens in a completely different window.
I think you might be looking for something like this http://jqueryui.com/demos/dialog/
http://planetozh.com/projects/lightbox-clones/
This is a pretty big list of such boxes. On that site you can filter for what you need ;).
I typically jump straight to fancybox when doing anything like this. Here you'll also find specific details about opening fancybox on page load. Hope this helps!
A demo popup without plugin. You've to modify it as need.
HTML
<div id="popup" class="hide">
<p><span class="close"> x </span>Language Selection</p>
<select id="languages">
<option value="">-- Please Select any language</option>
<option value="html">HTML</option>
<option value="js">JavaScript</option>
</select>
</div>
CSS
.hide {
display: none;
width: 300px;
height: 100px;
border: 2px solid #ddd;
}
#popup p {
background: #ccc;
padding: 5px;
}
.close {
display: block;
height: 5px;
width: 5px;
float: right;
padding-right: 5px;
cursor: pointer
}
jQuery
$(document).ready(function() {
var selection = null;
$('#popup').show();
$('#languages').on('change', function() {
selection = this.value || null;
});
$('.close').on('click', function() {
if (!selection) {
alert('Please any one language');
} else {
alert('Thanks');
$('#popup').hide();
}
});
});