Adding a Modal Dialog on page load
Question
I am just starting out learning some HTML and Java coding (read: I know practically nothing about this stuff) and would like to have my index.html page open an HTML file when it loads. Essentially I am looking for a kind of Modal Pop-Up. I have been researching jQuery and its various plugins (ie, LightBox, prettyPhoto, Boxy, etc.), but haven't been able to find any instructions that I can understand, given my extremely limited knowledge of programming language.
So far I understand that I need to have jQuery.js on my fileserver, as well as the plugin files themselves, but I have no idea what kind of coding I need to add into any preexisting files to activate a specific HTML file in a Modal Dialog box when the page loads. Can anyone help me with this?
Again, the simpler the answer, the better--because I don't know squat.
I humble myself before the programming wizards of our time...
3 answers
solution1
1 2010-10-21 05:41:52
You can achive modal window with out jquery. use the following code
function modalWin()
{ if(window.showModalDialog){ window.showModalDialog("xpopupex.htm","name", "dialogWidth:255px;dialogHeight:250px"); } else { window.open('xpopupex.htm','name', 'height=255,width=250,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no ,modal=yes'); } }
solution2
0 2010-10-20 17:10:21
$(document).load(function(){
$( ".selector" ).dialog({ modal: true });
});
solution3
0 ACCPTED 2010-10-20 17:23:49
Here is a method I like to do, I've re-factored it a bit so it'll open on load by triggering a click. You'll also have to download the fancybox plugin (which is awesome). Then you just add the iframe class to whatever link and it'll load the link the modal window. You can change it to an id if you like, it was originally used on multiple links etc.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".iframe").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'autoScale' : true,
'width' : '90%',
'height' : '90%',
'overlayOpacity': 0.8,
'centerOnScroll': true,
'showCloseButton': true,
});
$(".iframe").trigger('click');
});
</script>
The example:
<!DOCTYPE HTML>
<head>
<title>title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".iframe").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'autoScale' : true,
'width' : '90%',
'height' : '90%',
'overlayOpacity': 0.8,
'centerOnScroll': true,
'showCloseButton': true
});
$(".iframe").trigger('click');
});
</script>
<style type="text/css">
.iframe {display:none;}
</style>
</head>
<html>
<body>
<a href="www.google.com" class="iframe">Text</a>
</body>
</html>
That's an example. From here the only thing that you'll really have to make sure of is uploading the fancybox javascript file to the right folder. Do you have a link for the page so that we can see the page and error check it for you?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.