Форум

maximamus · #1 (**permalink**) 27.07.2015, 10:13

Добрый день!
Попытаюсь объяснить, что хочу...
Есть на странице кнопка, которая открывает iframe, при скроле она ходит вверх и вниз, логично же)
Хочу сделать так, что бы когда нажимаешь на кнопку, будь она где угодно (внизу, вверху) при открытии ifram'a кнопка центрировалась. А то нажал на кнопку, а выскочило окно или нет, кто его знает, а так сразу отцентрировало
Думаю мысль понятна. Заранее спасибо!

Leon-on12 · #2 (**permalink**) 27.07.2015, 13:18

var elem = document.getElemenById('butt')

<input id="butt" type="button" onclick="elem.style.position='absolute';elem.style.top='50%';elem.style.left='50%'">

maximamus · #3 (**permalink**) 27.07.2015, 15:09

подскажите пожалуйста куда его вставлять?
у меня такого вида код

<div id="ch1">
  <div id="closeButton" onclick="document.getElementById('ch1').style.display='none'">Х</div>
  <iframe src="/Summer2015_02/" width="1070" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
</div>
        	
 <div class="showcase">Подробнее<input type="button" value="" onclick="document.getElementById('ch1').style.display='block'">
</div>

Deff · #4 (**permalink**) 27.07.2015, 15:23

<style>
#ch1 {
  position:fixed;
  left:0;right:0;
  top:0;bottom:0;
  margin:auto;
}
</style>
<div id="ch1">
  <div id="closeButton" onclick="document.getElementById('ch1').style.display='none'">Х</div>
  <iframe src="/Summer2015_02/" width="1070" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
</div>
        	
 <div class="showcase">Подробнее<input type="button" value="" onclick="document.getElementById('ch1').style.display='block'">
</div>

maximamus · #5 (**permalink**) 27.07.2015, 15:44

не вышло(

maximamus · #6 (**permalink**) 27.07.2015, 15:47

что бы было понятней, вот пример сайта http://goldfig.ru/

там есть блоки, первые открываются на onlick, вторые на iframe
и когда открываешь блок, не центрирует главную страницу, на которой идет открытие блока, что не совсем удобно

Deff · #7 (**permalink**) 27.07.2015, 17:19

Сообщение от maximamus

не вышло(

<!DOCTYPE html>
<html>
<head>
<style>
  /*Для теста центрирования*/
body {
  width:100%;
}
body *{
  margin:0;
  padding:0;
}
#pun {
  height:760px;
}
/* End//Для теста */

/* Cтиль элементов */
#ch1 {
  display:none;
  position:fixed;
  left:0;right:0;
  top:0;bottom:0;
  width:500px; /*Тут ставим Вашу ширину под фрейм*/
  height:508px;
  margin:auto!important;
}
#closeButton {
  position:absolute;
  font: normal normal 400 16px/normal "Times New Roman";
  background:#fff;
  box-shadow: 0 0 12px rgba(0,0,0,.4);
  cursor:pointer;
  border-radius:20px;
  padding:3px 7px;
  border:solid 3px rgba(0,0,0,.5);
  top:-20px;
  right:-20px;
}
</style>
</head>
<body>
<div id="pun">
 
  <div class="showcase"><input type="button" value=" Подробнее " onclick="document.getElementById('ch1').style.display='block'"></div>
  <div id="ch1">
           <span id="closeButton" onclick="document.getElementById('ch1').style.display='none'" title=" Закрыть ">Х</span>
           <iframe src="http://javascript.ru/forum/" width="100%" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
  </div>
        	


</div>
</body>
</html>

Ссылку во фрейме заменил для теста

maximamus · #8 (**permalink**) 27.07.2015, 17:23

тут получается в body один блок и один подраздел, там же получается куча этих блоков и поэтому никак не выравнивает(

я думал как то можно скриптом это решить, но этой области, ваще дремучий лес(

Deff · #9 (**permalink**) 27.07.2015, 17:36

maximamus,
Тогда нун классом, а не id все блоки ставить, юзайте document.querySelectorAll

maximamus · #10 (**permalink**) 27.07.2015, 17:57

если бы я в этом js что то понимал, для меня это ваще черная магия( помогите пожалуйста разобраться(

Форум

Справочник

Discord чат

Курсы javascript