Adding a Modal Dialog on page load_问答_开发者

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 (i.e., 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 nee开发者_JAVA百科d 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...

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'); } }

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?

$(document).load(function(){
       $( ".selector" ).dialog({ modal: true });
});

Adding a Modal Dialog on page load

精彩评论

关注公众号

热门标签

图文推荐

Adding a Modal Dialog on page load

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：