Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
1

Реализовать окна сделанные на блоках div

16.04.2015, 10:10. Просмотров 673. Ответов 29
Метки нет (Все метки)

необходимо реализовать окна. вот то что у меня уже есть
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body, html { 
margin:0px;overflow:hidden;
background:URL(src/bg/default.jpg);
background-repeat:no-repeat;background-size:100%;
} 
.my-panel {
display:block;position:absolute;border-top:2px solid #480048;
bottom:0px;width:100%;height:42px;
background:URL(src/textr/panel.jpg);
opacity: 0.9;z-index:5;
}
 
 
 
.window-view {
display:block;position: absolute;
height:380px;width:650px;background: rgba(255, 255, 255, 0.5);
border:1px solid #0BB;border-radius: 10px 10px 0px 0px;
 
}
.window-view-title {
width:100%;background-color:#A5C9EF;font-size:larger;
border-radius: 10px 10px 0px 0px;color:#FFF;font-weight:bold;
cursor:pointer;height:30px;line-height:30px;opacity:0.7;
}
.window-view-btn-exit {
 border-radius: 0px 10px 0px 0px;width:30px;float:right;
 height:30px;background-color:#C90000;
 margin: 0 auto; display: table-cell;vertical-align: middle;
 
} 
.window-view-btn-exit:hover { background-color:#940000; }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
 
?>
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="scripts/main.js"></script>
<title></title>
</head>
<body>
<div class="my-panel">
<div>
 
</div>
</div>
 
<div class="window-view" id="Window">
<div class="window-view-title" onmousedown="javascript:mouseDown(this, event);">
<span style="margin-left:10px;position:relative;">Заголовок окна</span>
<div class="window-view-btn-exit"><img src="src/img/close.png" style="width:28px;height:28px;vertical-align:middle;display:inline-block;" alt=""></div></div>
<iframe src="" frameborder="0" style="height:350px;width:100%;position:relative;"></iframe>
</div>
</body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var dragObject;
    var offsetX, offsetY;
    var isDragging = false;
 
    window.onload = init;
 
    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;
 
    function init() {
      var o = document.getElementByClassName("window-view");
      o.ondrag = function() { return false; };
      o.onselectstart = function() { return false; };
      o.style.left = "100px";
      o.style.top = "100px";
      o.style.display = "block";
    }
 
    function mouseDown(o, e) {
    var o = document.getElementByClassName("window-view");
      dragObject = o;
      if(window.event) e = window.event;
      var oX = parseInt(dragObject.style.left);
      var oY = parseInt(dragObject.style.top);
      var mouseX = e.clientX;
      var mouseY = e.clientY;
      offsetX = mouseX - oX;
      offsetY = mouseY - oY;
      isDragging = true;
      return false;
    }
 
    function mouseMove(e) {
    var o = document.getElementByClassName("window-view");
      if(!isDragging) return;
      if(window.event) e = window.event;
      var mouseX = e.clientX;
      var mouseY = e.clientY;
      var newX = mouseX - offsetX;
      var newY = mouseY - offsetY;
      dragObject.style.left = newX + "px";
      dragObject.style.top = newY + "px";
      return false;
    }
 
    function mouseUp() {
   var o = document.getElementByClassName("window-view");
      if(!isDragging) return;
      isDragging = false;
      return false;
    }
Проблема в том, что скрипт работает по id, а я хочу чтобы окон можно было делать несколько.
Подскажите пожалуйста, как реализовать. Заранее спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.04.2015, 10:10
Ответы с готовыми решениями:

Однократное появление div окна при загрузке страницы
Добрый день) Прошу помочь мне с таким вопросом: Есть главная страница сайта на...

Как правильно реализовать задачу (всплывающие окна)?
Суть такая - есть php код, который выводит кучу ссылок вида echo'&lt;a...

Как реализовать скрипт который реагирует на закрытие окна?
Подскажите как реализовать скрипт который реагирует на закрытие окна?

Создать сайт на <div> блоках
Здравствуйте, ранее делал сайты на таблицах. Прошло пару лет и смотрю, что всё...

Отступы во вложенных блоках div
Доброго времени суток! Столкнулся с такой проблемой: два блока, один вложен в...

29
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
18.04.2015, 10:39  [ТС] 21
Цитата Сообщение от kalabuni Посмотреть сообщение
ферштейн или опять нихт ферштейн?
спасибо. сейчас проверим. не понял Вас просто.

Добавлено через 2 минуты
kalabuni, огромное спасибо. Работает!

Добавлено через 3 минуты
kalabuni, BANO, а может за одно скажите как получить конкретное одно окно из этого скрипта. просто я хотел попробовать реализовать кнопку закрытия окна, чтобы на крестик окно либо полностью уничтожалось , либо хотя бы просто скрывалось.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 11:18 22
Лучший ответ Сообщение было отмечено slenderface как решение

Решение

я конечно может и не очень быстро пишу, но я сразу понял проблему и сделал скрипт который хотел, всё же я бы хотел представить полностью работающий скрипт с "крестиком"
написанный грамотно и понятно
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function newWindow(title, src) {
        var win=document.createElement("div"),
                winHead=document.createElement("div"),
                t=document.createElement("span"),
                cross=document.createElement("div"),
                fraim=document.createElement("iframe"),
                img= new Image();
        win.classList.add("window-view");
        win.style.cssText="left:100px;top:100px;";
        winHead.classList.add("window-view-title");
        t.style.cssText= "margin-left:10px;position:relative;";
        t.innerHTML= title;
        cross.classList.add("window-view-btn-exit");
        img.src="src/img/close.png";
        img.style.cssText=( "width:28px;height:28px;vertical-align:middle;display:inline-block;");
        cross.appendChild(img);
        winHead.appendChild(t);
        winHead.appendChild(cross);
        fraim.frameBorder="0";
        fraim.src=src;
        fraim.style.cssText="height:350px;width:100%;position:relative;";
        win.appendChild(winHead);
        win.appendChild(fraim);
        img.onclick=function(){document.body.removeChild(win)}
        win.ondrag = function() { return false; };
        win.onselectstart = function() { return false; };
        win.onmousedown=mouseDown;
        win.onmouseup=mouseUp;
        win.onmouseout=mouseUp;
        win.onmousemove=mouseMove;
        document.body.appendChild(win);
    }
и, kalabuni, прошу больше не выставлять меня идиотом

Добавлено через 3 минуты
и вот ваш долгожданный крестик в функции init
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function init() {
        var els = document.getElementsByClassName("window-view");
        function perebirator(e, id, array) {
            e.ondrag = function() { return false; };
            e.onselectstart = function() { return false; };
            e.onmousedown=mouseDown;
            e.onmouseup=mouseUp;
            e.onmouseout=mouseUp;
            e.onmousemove=mouseMove;
            e.getElementsByClassName("window-view-btn-exit")[0].onclick=function(){document.body.removeChild(e)}
            e.style.left = "100px";
            e.style.top = "100px";
            e.style.display = "block";
        }
        for (var c in els){
            perebirator(els[c])
        }
    }


Добавлено через 5 минут
kalabuni, я изначально всё ставил скриптом, а скрипт только от этих значений и скачет

Добавлено через 1 минуту
slenderface, если вам мешает стиль, можно сделать так же через атрибуты как и щааыуе
1
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
18.04.2015, 13:41  [ТС] 23
BANO, Вы просто гений! Огромное Вам человеческое спасибо! Если будет голосование за лучшего форумчанина на форуме, можете 100% на мой голос!

Добавлено через 5 минут
Цитата Сообщение от BANO Посмотреть сообщение
грамотно и понятно
Код Javascript
Спасибо, но так как я создаю окно - это плохо?

Добавлено через 58 секунд
Цитата Сообщение от BANO Посмотреть сообщение
и вот ваш долгожданный крестик в функции init
а за это отдельное спасибо!
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 14:23 24
Цитата Сообщение от slenderface Посмотреть сообщение
как я создаю окно - это плохо?
нет нормально, но неудобно с этим работать, вы делаете прямым текстом и eventlistner на эти элементы поставить не сможете, а я поставил
0
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
18.04.2015, 16:02  [ТС] 25
Цитата Сообщение от BANO Посмотреть сообщение
нет нормально, но неудобно с этим работать, вы делаете прямым текстом и eventlistner на эти элементы поставить не сможете, а я поставил
а что он даёт?

Добавлено через 1 час 23 минуты
BANO, я тут ещё через jQuery пытаюсь заголовок получить. что тут не так, скажите пожалуйста?
Javascript
1
2
3
4
e.getElementsByClassName("window_view")[0].onload=function(){
var path = document.body; 
var l = $('iframe').contents().find("title").html();
path.innerHTML += l;
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 17:53 26
slenderface, ну нету у div такого события onload(
а насчёт 3 строки я неуверен, насколько я понял вы пытаетесь взять ВСЕ элементы с тегом TITLE, соторый может быть только в head и 1, и не может innerHTML записывать МАССИВЫ
0
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
18.04.2015, 20:10  [ТС] 27
Цитата Сообщение от BANO Посмотреть сообщение
а насчёт 3 строки я неуверен, насколько я понял вы пытаетесь взять ВСЕ элементы с тегом TITLE, соторый может быть только в head и 1, и не может innerHTML записывать МАССИВЫ
а как этим кодом получить этот титл конкретного iframe в нашем окне и записать в титл того же окна?
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 21:53 28
вопрос, вы контент iframe собираетесь со своего сайта брать или из интернета?
1
slenderface
9 / 9 / 5
Регистрация: 24.03.2014
Сообщений: 294
19.04.2015, 15:40  [ТС] 29
Цитата Сообщение от BANO Посмотреть сообщение
вопрос, вы контент iframe собираетесь со своего сайта брать или из интернета?
по разному, но в основном со своего.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
19.04.2015, 20:57 30
вы не сможете точно узнавать title, но можете попробовать найти что-нибудь в интернете на эту тему(я искал, нашёл, но это достаточно трудный метод и вам он не подойдёт)
1
19.04.2015, 20:57
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.04.2015, 20:57

PHP7 получение данных в блоках div
Раньше на 5 версии PHP работала такая схема: while ($row = mysql_fetch_array...

Не срабатывают css в div блоках, что делать?
Здравствуйте! Не срабатывают css в div блоках, что делать? body, html {...

Выравнивание кнопок в трех разных div блоках
Что то я голову сломал!!?? Есть три div блока одинакового размера высотой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
30
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru