Question

我刚开始学习一些HTML和Java编码（阅读：我几乎不知道这些东西）并希望我的index.html页面在加载时打开一个HTML文件。基本上我正在寻找一种模态弹出窗口。我一直在研究jQuery及其各种插件（即LightBox，prettyPhoto，Boxy等），但由于极其有限的知识，我无法找到任何我能理解的指令。编程语言。

到目前为止，我知道我需要在我的文件服务器上安装jQuery.js，以及插件文件本身，但我不知道我需要将哪种编码添加到任何预先存在的文件中以激活特定的HTML文件在页面加载时在模态对话框中。谁能帮我这个？

同样，答案越简单越好 - 因为我不知道蹲下。

我在我们这个时代的编程向导之前谦卑自己......

Answer 1

你可以在没有jquery的情况下实现模态窗口。使用以下代码

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

这是我喜欢做的一种方法，我稍微重新考虑了它，所以它会通过触发点击而在加载时打开。您还必须下载fancybox插件（非常棒）。然后你只需将iframe类添加到任何链接，它将加载模式窗口的链接。如果您愿意，可以将其更改为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>

示例：

<!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>

这就是一个例子。从这里，您唯一需要确保的是将fancybox javascript文件上传到正确的文件夹。你有一个页面链接，以便我们可以看到页面并为你检查错误吗？

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

3 个答案: