Модальное окно с использованием JavaScript - PullRequest
Новая
       1

Модальное окно с использованием JavaScript

1 голос
/ 25 февраля 2012

Я добавил следующий скрипт на мою страницу, который написан на html и css, чтобы создать модальное поле для моих изображений, чтобы он выглядел немного более профессиональным при открытии каждого изображения, позволяя просматривать их без открытия / сталкиваюсь с окнами несколько раз. 

  <script language=javaScript>
    <!-- Beginning of JavaScript -

    var x,y,a,b,timer,thisbox,isbox,urlimg
    var posleftvorher

    var box

    if (document.layers) {
    var left_pos=".left=";
    var top_pos=".top=";
    var doc="document.";
    var stl="";
    }

    if (document.all) {
    var left_pos=".pixelLeft=";
    var top_pos=".pixelTop=";
    var doc="";
    var stl=".style";
    }

    function openbox(thisbox) {
    isbox = thisbox
        if(document.layers) {
            box = document.popupbox
            box.visibility="visible"
            document.popupbox.document.write("<img src='"+thisbox+"'>")
            document.popupbox.document.close()
            document.popupbox.left=x+25
            document.popupbox.top=y
        }

        if(document.all) {
            box = document.all.popupbox.style
            box.visibility="visible"
            popupbox.innerHTML="<img src='"+thisbox+"'>"
            eval(doc+"popupbox"+stl+left_pos+(x+25))
            eval(doc+"popupbox"+stl+top_pos+y)
            timer=setTimeout("openbox(isbox)",50)
        }

}

    function closebox(){
        clearTimeout(timer)
        box.visibility="HIDDEN"
    }

    function handlerMM(e){
    x = (document.layers) ? e.pageX : event.clientX
    y = (document.layers) ? e.pageY : event.clientY
    } 
    if
    (document.layers){
    document.captureEvents(Event.MOUSEMOVE);
    }


    document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>

Затем я добавил несколько CSS и HTML 

     <div id="main" class="mainstyle">
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('sandra288.gif')" onMouseOut="closebox()"> </a>
    <a href="#" onMouseOver="openbox('catherine288.gif')" onMouseOut="closebox()"></a>
    <a href="#" onMouseOver="openbox('garbo288.gif')" onMouseOut="closebox()"> </a>
    </div>

<div id="popupbox" style="position:absolute"></div>


        .mainstyle {
                position: absolute;
                font-family:Verdana;
                color:DDDDDD;
    font-size:40px;
    }

    A {
    color:DDDDDD;
    text-decoration:none;
    }

Теперь, когда я реализую эти коды и сценарии, ничего не происходит, изображения даже не появляются на странице.

1 Ответ

0 голосов
/ 03 марта 2012

Работает в т.е.Но не в хроме, опере и огненной лисе 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


     <script language=javaScript>

        var x,y,a,b,timer,thisbox,isbox,urlimg;
        var posleftvorher;

        var box;

        if (document.layers) {
        var left_pos=".left=";
        var top_pos=".top=";
        var doc="document.";
        var stl="";
        }

        if (document.all) {
        var left_pos=".pixelLeft=";
        var top_pos=".pixelTop=";
        var doc="";
        var stl=".style";
        }

        function openbox(thisbox) {
        isbox = thisbox;
            if(document.layers) {
                box = document.popupbox;
                box.visibility="visible";
                document.popupbox.write("<img src='"+thisbox+"'>");
                document.popupbox.close();
                document.popupbox.left=x+25;
                document.popupbox.top=y;
            }

            if(document.all) {
                box = document.all.popupbox.style;
                box.visibility="visible";
                popupbox.innerHTML="<img src='"+thisbox+"'>";
                eval(doc+"popupbox"+stl+left_pos+(x+25));
                eval(doc+"popupbox"+stl+top_pos+y);
                timer=setTimeout("openbox(isbox)",50);
            }

    }

        function closebox(){
            clearTimeout(timer);
            box.visibility="HIDDEN";
        }

        function handlerMM(e){
        x = (document.layers) ? e.pageX : event.clientX;
        y = (document.layers) ? e.pageY : event.clientY;
        } 
        if
        (document.layers){
        document.captureEvents(Event.MOUSEMOVE);
        }


        document.onmousemove = handlerMM;

    </script>

    <style type="text/css">
     .mainstyle {
                    position: relative;
                    font-family:Verdana;
                    color:#FF0000;
        font-size:40px;
        }

        a {
        color:#0033FF;
        text-decoration:none;
        }
    </style>

    </head>

    <body>


    <div id="main" class="mainstyle">
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">aaaaaaaaaa</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> bbbbb</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ccccccc</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">dddddddd</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">eeeeeeee</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ffffffff</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">ggggggg</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> hhhhhhhh</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">iiiiiii </a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">jjjjjj </a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()">kkkkkkk</a>
        <a href="#" onMouseOver="openbox('card.jpg')" onMouseOut="closebox()"> lllll</a>
        </div>

    <p>&nbsp;</p>

    <div id="popupbox" style="position:absolute"></div>


    </body>
    </html>

Ошибки были

  • Ничего не было внутри якорей
  • # не было цветов (в CSS)
  • ;не используется в сценарии Java
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...