在页面加载时添加模态对话框

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. 我刚刚开始学习一些HTML和Java编码（阅读：我对这些东西几乎一无所知），并希望我的index.html页在加载时打开HTML文件。 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. 我一直在研究jQuery及其各种插件（例如，LightBox，prettyPhoto，Boxy等），但是由于我对编程语言的了解非常有限，所以我找不到能够理解的任何指令。

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. 到目前为止，我知道我需要在文件服务器上以及插件文件本身上安装jQuery.js，但是我不知道我需要在现有的文件中添加哪种编码来激活Modal中的特定HTML文件。页面加载时的对话框。 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... 在我们这个时代的编程向导面前，我谦虚……

Answer 1

You can achive modal window with out jquery. 您可以在不使用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'); } }

Answer 2

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

Answer 3

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). 您还必须下载fancybox插件（很棒）。 Then you just add the iframe class to whatever link and it'll load the link the modal window. 然后，您只需将iframe类添加到任何链接，它就会将该链接加载到模式窗口。 You can change it to an id if you like, it was originally used on multiple links etc. 您可以根据需要将其更改为ID，它最初用于多个链接等。

    <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. 从这里开始，您唯一需要确定的就是将fancybox javascript文件上传到正确的文件夹。 Do you have a link for the page so that we can see the page and error check it for you? 您是否有该页面的链接，以便我们可以查看该页面并为您进行错误检查？

在页面加载时添加模态对话框

问题描述

3 个解决方案

解决方案1
1 2010-10-21 05:41:52

解决方案2
0 2010-10-20 17:10:21

解决方案3
0 已采纳 2010-10-20 17:23:49

在页面加载时添加模态对话框

问题描述

3 个解决方案

解决方案1 1 2010-10-21 05:41:52

解决方案2 0 2010-10-20 17:10:21

解决方案3 0 已采纳 2010-10-20 17:23:49

解决方案1
1 2010-10-21 05:41:52

解决方案2
0 2010-10-20 17:10:21

解决方案3
0 已采纳 2010-10-20 17:23:49