Добавление модального диалога при загрузке страницы - PullRequest
Новая
       7

Добавление модального диалога при загрузке страницы

0 голосов
/ 20 октября 2010

Я только начинаю изучать HTML и Java-кодирование (читай: я практически ничего не знаю об этом) и хотел бы, чтобы моя страница index.html открывала HTML-файл при загрузке. По сути, я ищу модальное всплывающее окно. Я исследовал jQuery и его различные плагины (например, LightBox, prettyPhoto, Boxy и т. Д.), Но не смог найти никаких инструкций, которые я могу понять, учитывая мои чрезвычайно ограниченные знания программирования язык.

Пока я понимаю, что мне нужно иметь jQuery.js на моем файловом сервере, а также сами файлы плагинов, но я не знаю, какую кодировку мне нужно добавить в любые существующие файлы для активации определенного HTML-файла. в модальном диалоговом окне при загрузке страницы. Кто-нибудь может мне с этим помочь?

Опять же, чем проще ответ, тем лучше - потому что я не знаю приседания.

Я смиряюсь перед волшебниками нашего времени ...

Ответы [ 3 ]

1 голос
/ 21 октября 2010

Вы можете получить модальное окно без jquery. используйте следующий код

function modalWin()<br> { 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'); } }

0 голосов
/ 20 октября 2010

Вот метод, который мне нравится делать, я немного переработал его, чтобы он открывался при загрузке, вызывая щелчок.Вам также нужно будет скачать плагин 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>

Это пример.Отсюда единственное, в чем вы действительно должны быть уверены, это загрузить javascript-файл fancybox в нужную папку.У вас есть ссылка на страницу, чтобы мы могли ее увидеть и проверить на наличие ошибок?

0 голосов
/ 20 октября 2010 
$(document).load(function(){
       $( ".selector" ).dialog({ modal: true });
});
...