WeB Pages Информация Выбор кода баннера в модальном окне

Выбор кода баннера в модальном окне

Выбор кода баннера в модальном окне

При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на другую страницу.

Выбор кода баннера в модальном окне

При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на другую страницу.

Выбор кода баннера в модальном окне

Установка:
1. В файл style.css Вашего шаблона вставить:

/*Оформление кнопки баннеров*/
#code-p-wrap { width: 600px; padding:0; margin:0; background-color: #EAEAEA; font: 12px Georgia, «Times New Roman», Times, serif; color: #2d2d2d;}
#code-p-wrap a img { border: 0; }
#code-p-wrap fieldset { border: 1px solid #666; padding: 15px; }
#code-p-wrap .code-selector div { clear: both; margin: 0 0 25px 0; }
#code-p-wrap label { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
#code-p-wrap .code-selector select { border: 1px solid #666; width:120px}
#code-p-wrap .code-selector option { padding: 0 12px; }
#code-p-wrap .code-selector textarea { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
#code-p-wrap .note { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666;}
#code-p-wrap .example-area { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
#code-p-wrap .example-area img { max-width: 100%; }

2. В то место где Вы хотите видеть кнопку «Код баннера» вставить:

<center>
   <a href=»/» target=»_blank» title=»Все для вебмастера!»>
      <img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» />
   </a><br /><br />
   <input value=»Код баннера» onclick=»showCode();» type=»button» />
</center>
<div id=»code» title=»Выберите код баннера для вставки на сайт» style=»display: none;»>
   <div id=»code-p-wrap»>
      <fieldset>
         <form action=»#» class=»code-selector»>
            <div>
               <label>Размер: </label>
               <select name=»type-size» id=»type-size»>
                  <option selected=»selected» value=»88×31.gif»>88 x 31</option>
                  <option value=»468×60.gif»>468 x 60</option>
                  <option value=»250×250.gif»>250 x 250</option>
               </select>
            </div>
            <div>
               <label>Код: </label>
               <textarea rows=»10″ cols=»25″ id=»code-box»>&lt;a href=»http://vipflex.ru/» title=»Все для вебмастера!»&gt;&lt;img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/88×31.gif» /&gt;&lt;/a&gt;</textarea>
                <p class=»note»>Просто скопируйте код выше и вставьте в свою страничку</p>
             </div>
          </form>
          <label>Пример: </label>
          <div class=»example-area» id=»graphic-example-area»>
             <a href=»/» target=»_blank» title=»Все для вебмастера!»><img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» /></a>
          </div>
          <p class=»note»>Пример баннера</p>
       </fieldset>
    </div>
</div>
<script type=»text/javascript»>
//<![CDATA[
   $(function() {
   $(«#type-size»).change(function() {
   var graphicFileName = $(«#type-size option:selected»).attr(«value»);
   var newCode = ‘<a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/’ + graphicFileName + ‘» /></a>’;
   $(«#code-box»).text(newCode);
   $(«#graphic-example-area»).html(newCode);
        });
   });
   function showCode() {
      $(function(){
      $(‘#code’).dialog({
         autoOpen: true,
         show: ‘fade’,
         hide: ‘fade’,
         width: 622,
         });
      });
   }
//]]>
</script>


3. Замените все пути к баннерам на свои.

4. Чтобы добавить баннеры найдите:

<option selected=»selected» value=»88×31.gif»>88 x 31</option>
<option value=»468×60.gif»>468 x 60</option>
<option value=»250×250.gif»>250 x 250</option>


и ниже добавьте

<option value=»Здесь имя файла баннера»>Здесь описание (Размеры)</option>


Пример можете посмотреть на этом сайте справа в блоке «Поддержи наш сайт».

Автор: VipFlex

Related Post

Фасадная сеткаФасадная сетка

Фасадная Фасадная сетка под штукатурку — это прочная основа, которая удерживает отделку от растрескивания, отслоения и разрушения. Армирование позволяет штукатурить любые поверхности, выполнять отделку фасадов каркасных домов, коттеджей из кирпича,

доработка базы 1сдоработка базы 1с

Программисты доработка базы 1с, разрабатывая типовые конфигурации, стараются сделать их максимально универсальными. Поэтому иногда нужные для пользователя операции становятся очень «раздутыми» ненужными доп. функциями и становятся сложными для понимания. Получается,

где купить постельное бельегде купить постельное белье

Самых различных объемов, цветов, из самых различных тканей позволительно приобрести постельное платье дешево в вебе. Принципиально направить интерес на некие подробности. 1. Величина Мы пристрастились опознаться в объемах сообразно виду