Как открыть мои ссылки «всплывающее окно»

<div id="box1"> <a href="#"><img src="images/pskeksmall.jpg" alt="" /></a> 
     <h2 class="subtitle">Student Makes our new website</h2> 
     <p>We are very proud to announce that our new website was designed and created by Charlie Johnson</p> 
     <ul class="contact"> 
      <li><a href="#" class="icon icon-facebook"><span></span></a></li> 
      <li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li> 
      <li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li> 
     </ul> 
    </div>

Что я хочу, чтобы это было сделано, открывается в небольшом окне и содержит дополнительную информацию по этой теме. Я только кратко посмотрел на JavaScript, поэтому, если есть простой способ сделать это без JScript, было бы предпочтительнее. Мне нужно сделать это и для 3 других ящиков.Как открыть мои ссылки «всплывающее окно»

EDIT: Возможно, я был не очень ясен, я не хочу, чтобы пользователь оставлял страницу вообще, используя Chrome. Я знаю, что всплывающие окна открываются в маленьком диалоговом окне, это то, что я хочу, чтобы информация была быть обеспечены. Если это невозможно, можно ли изменить информацию в основной текстовой области, не меняя страницу?

EDIT 2: OK, так что я нашел это на W3Schools.com:

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function myFunction() { 
    document.getElementById("demo").innerHTML = "Paragraph changed."; 
} 
</script> 
</head> 

<body> 

<h1>JavaScript in Head</h1> 

<p id="demo">A Paragraph.</p> 

<button type="button" onclick="myFunction()">Try it</button> 

</body> 
</html>

Так что я теперь интересно, если можно было бы использовать мое изображение заменителя кнопки и изменить мой вместо пункта используемый выше.

источник

2015-11-08 Charlie Johnson

в основном вы хотите открыть DIV информации о зависании на любую ссылку? –

@ShudhanshShekhar Sorta, но вместо зависания я хочу его, когда они нажмут. –

Читать эту тему: http://stackoverflow.com/questions/11023816/toggle-divs-without-using-javascript –

Вот является CSS только примера того, как вы можете click-to-discovery a (обычно скрытый) элемент, который затем может отображать дополнительную информацию.

Нет необходимости в javascript!

.more-info { 
 
display: none; 
 
background-color: rgba(255,255,127,1); 
 
padding: 6px; 
 
border: 2px solid rgba(127, 0, 0, 1); 
 
} 
 

 
#item1:target, #item2:target { 
 
display: inline-block; 
 
}

<ul> 
 
    <li><a href="#item1">Click me for more info about Item 1</a></li> 
 
    <li><a href="#item2">Click me for more info about Item 2</a></li> 
 
</ul> 
 

 
<p id="item1" class="more-info">Now you can read more information about Item 1</p> 
 
<p id="item2" class="more-info">Now you can read more information about Item 2</p>

источник

2015-11-08 13:27:51 Rounin

Это именно то, что мне было нужно, спасибо так много Рунину. Есть ли способ переключить это? Или это будет только до тех пор, пока пользователь не обновит страницу? –

Как только URL-адрес браузера имеет '# фрагмент' в конце его, вы не можете его от него избавиться - вы можете поменять его только на другой« # фрагмент »(нажав на другой привязку на странице).Единственный способ остаться на странице и избавиться от '# fragment' (без javascript) - это обновить страницу. – Rounin

Простой HTML способ сделать это состоит в использовании тегов с целевым атрибутом:

<a href="/some/path" target="_blank">Try it</a>

Документация тег: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

источник

2015-11-08 13:14:19 socketwiz

Я использовал тег '' в других частях веб-сайта, но мне все равно нужно создать новую веб-страницу как 'href'. Есть ли способ изменить текст на текущей странице html, или мне нужно создать новую страницу для каждой истории? –

Вы должны поместить HTML где-нибудь, либо на новую страницу, либо в существующую. Ваш начальный вопрос: «Что я хочу, чтобы это открывалось в маленьком окне». Для этого вам понадобится новая страница. – socketwiz

Как открыть мои ссылки «всплывающее окно»

ответ

Смежные вопросы