необходимо создать всплывающее окно с CSS свойствами

Мне нужно создать всплывающее окно с CSS свойствами для div.необходимо создать всплывающее окно с CSS свойствами

В этом всплывающем окне мне нужно показать некоторую информацию в другом div.

2014-02-17 user3313598

Так что вам нужно один DIV с видом на всплывающей и второй DIV внутри первой, чтобы сделать данные? – Evgeniy

Да, мне так нужно – user3313598

Привет, попробуйте как css popup http://www.script-tutorials.com/css3-modal-popups/ – Jeba

простейшие из всех

<html> 
    <head> 
     <title>LIGHTBOX EXAMPLE</title> 
     <style> 
     .black_overlay{ 
      display: none; 
      position: absolute; 
      top: 0%; 
      left: 0%; 
      width: 100%; 
      height: 100%; 
      background-color: black; 
      z-index:1001; 
      -moz-opacity: 0.8; 
      opacity:.80; 
      filter: alpha(opacity=80); 
     } 
     .white_content { 
      display: none; 
      position: absolute; 
      top: 25%; 
      left: 25%; 
      width: 50%; 
      height: 50%; 
      padding: 16px; 
      border: 16px solid orange; 
      background-color: white; 
      z-index:1002; 
      overflow: auto; 
     } 
    </style> 
    </head> 
    <body> 
     <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> 
     <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
     <div id="fade" class="black_overlay"></div> 
    </body>

источник

2014-02-17 11:10:51 sanjeev

Я всегда предлагает использовать плагин JQuery, так что вам не придется беспокоиться о позиционировании и стиле всплывающего окна. Есть много хороших плагинов, которые мне больше всего нравятся, fancybox.

Если вы не используете JQuery в любом случае, самый простой способ для создания "всплывающих окон в стиле" стиль для DIV:

HTML-

<div class="popup">This is the popup content</div>

В CSS

.popup { 
    position:absolute; 
    background:#FFF; 
    border:1px solid #000; 
    width: 150px; 
    height: 150px; 
    left:50%; 
    top:50%; 
    margin-left:-75px; 
    margin-top:-75px; 
    padding: 20px; 
}

Example

источник

2014-02-17 11:11:33

HTML

<div class="popup"> 
    <div class="popup-data"> 
     some text here 
    </div>  
</div>

CSS

.popup{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 300px; 
    height: 200px; 
    margin: -100px 0 0 -150px; 

    background-color: #F9F9F9; 
    border: 1px solid #e5e5e5; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

.popup-data{ 
    padding: 10px; 
}

fiddle

источник

2014-02-17 11:18:30 Evgeniy

необходимо создать всплывающее окно с CSS свойствами

ответ

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