Коллеги.
На сайте использую всплывающие модальные окна, организованные через div.
Они не работают (во всяком случае у меня) в эксплорере.
Второе пожелание: Хочу поставить в это окно счетчик. Но так как окно (div) грузится при загрузке страницы, у меня счетчик всегда выдает плюс один, а не только, когда окно вызвано.
Вопрос.
1. Как мне сделать мультиплатформенное модальное окно: firefox, chrome, IE, ipad, android
2. Как мне посчитать количество "вызванных" окон?
Полностью за меня сделать всю работу не прошу. Задайте вектор поиска.
<!-- Модальное окно №1 -->
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
<h2>Заголовок</h2>
<center><img src="realism.jpg" alt="realism" /></center>
<a class="close" title="Закрыть" href="#close"></a>
</div>
показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
001 /* Базовые стили модального окна */
002 .overlay {
003 background-color: rgba(0, 0, 0, 0.7);
004 bottom: 0;
005 cursor: default;
006 left: 0;
007 opacity: 0;
008 position: fixed;
009 right: 0;
010 top: 0;
011 visibility: hidden;
012 z-index: 1;
013 -webkit-transition: opacity .5s;
014 -moz-transition: opacity .5s;
015 -ms-transition: opacity .5s;
016 -o-transition: opacity .5s;
017 transition: opacity .5s;
018 }
019 .overlay:target {
020 visibility: visible;
021 opacity: 1;
022 }
023 .popup img{
024 display: inline;
025 border: none;
026 -webkit-border-radius: 10px;
027 -moz-border-radius: 10px;
028 border-radius: 10px;
029 background: #ffffff;
030 }
031 .popup {
032 background-color: #fff;
033 border: 3px solid #fff;
034 display: inline-block;
035 left: 50%;
036 opacity: 0;
037 padding: 10px;
038 position: fixed;
039 text-align: justify;
040 font: 14px Helvetica, Arial, Sans-Serif;
041 top: 40%;
042 visibility: hidden;
043 z-index: 10;
044
045 -webkit-transform: translate(-50%, -50%);
046 -moz-transform: translate(-50%, -50%);
047 -ms-transform: translate(-50%, -50%);
048 -o-transform: translate(-50%, -50%);
049 transform: translate(-50%, -50%);
050
051 -webkit-border-radius: 10px;
052 -moz-border-radius: 10px;
053 -ms-border-radius: 10px;
054 -o-border-radius: 10px;
055 border-radius: 10px;
056
057 -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
058 -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
059 -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
060 -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
061 box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
062
063 -webkit-transition: opacity .5s, top .5s;
064 -moz-transition: opacity .5s, top .5s;
065 -ms-transition: opacity .5s, top .5s;
066 -o-transition: opacity .5s, top .5s;
067 transition: opacity .5s, top .5s;
068 }
069 .overlay:target+.popup {
070 top: 50%;
071 opacity: 1;
072 visibility: visible;
073 }
074 /* Кнопка закрытия окна */
075 .close {
076 background-color: rgba(0, 0, 0, 0.8);
077 border: 2px solid #ccc;
078 height: 24px;
079 line-height: 24px;
080 position: absolute;
081 right: -13px;
082 font-weight: bold;
083 text-align: center;
084 text-decoration: none;
085 top: -15px;
086 width: 24px;
087 -webkit-border-radius: 15px;
088 -moz-border-radius: 15px;
089 -ms-border-radius: 15px;
090 -o-border-radius: 15px;
091 border-radius: 15px;
092 -moz-box-shadow: 1px 1px 3px #000;
093 -webkit-box-shadow: 1px 1px 3px #000;
094 box-shadow: 1px 1px 3px #000;
095 }
096 .close:before {
097 color: rgba(255, 255, 255, 0.9);
098 content: "X";
099 font-size: 14px;
100 text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
101 }
102 .close:hover {
103 background-color: rgba(64, 128, 128, 0.8);
104 }
105 .popup p, .popup div {
106 margin-bottom: 10px;
107 }