Всплывающее окно

25 сентября 2013 г.

Всплывающее окно

На странице каталога статей хочется сделать ссылку "Как добавить статью", при клике на которую без перезагрузки страницы всплывало бы окно с информацией по этому поводу. И крестиком для закрытия.

В системе предусмотрена такая возможность?
Как это сделать штатными средствами?

Модератор 26 сентября 2013 г.

Re: Всплывающее окно

http://www.hostcms.ru/forums/2/7818/

Принцип тот же.

Вы только что начали читать предложение, чтение которого вы уже заканчиваете.

26 сентября 2013 г.

Re: Всплывающее окно

Принцип ясен, но как сделать вызов в моем конкретном случае?

Вот здесь http://test.business-only.ru/articles-business/ имеется строка "КАК ДОБАВИТЬ СТАТЬЮ" (посередине). Какой код к ней добавить для вызова пояснения?

Макет:

<!DOCTYPE html>
<html>

<head>
    <title><?php Core_Page::instance()->showTitle()?></title>
    <meta name="description" content="<?php Core_Page::instance()->showDescription()?>" />
    <meta name="keywords" content="<?php Core_Page::instance()->showKeywords()?>" />
    <meta content="text/html; charset=<?php echo SITE_CODING?>" http-equiv="Content-Type" />
    <?php Core_Page::instance()->showCss()?>

    
    <script type="text/javascript" src="/hostcmsfiles/jquery/jquery.js"></script>

    
    <script type="text/javascript" src="/hostcmsfiles/jquery/lightbox/js/jquery.lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="/hostcmsfiles/jquery/lightbox/css/jquery.lightbox.css" media="screen" />

    <script type="text/javascript" src="/templates/template1/hostcms.js"></script>
    <script type="text/javascript" src="/hostcmsfiles/main.js"></script>

    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/news/rss/" />


<script type="text/javascript" src="/hostcmsfiles/jquery/reveal/jquery.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="/hostcmsfiles/jquery/reveal/reveal.css" />

</head>

<body>

   <div id="modalCart" class="reveal-modal">
      <h1>Добавление статей</h1>
      <p>Чтобы добавить статью, обращайтесь к администратору</p>
      <a class="close-reveal-modal">×</a>
   </div>

<div style="max-width:1250px;border: #EAA742 1px solid;background-color:white;margin:auto;padding:1%">

         <table border="0" width="100%" id="table2" style="border-collapse: collapse">
            <tr>
               <td rowspan="2" width="16%">
               <a href="/">
               <img border="0" src="/my-images/ruki.jpg" width="191" height="150"></a></td>
               <td width="54%">
<p style="margin-top: 0; margin-bottom: 0; margin-left:0px" align="center"><b>
<font face="Arial" color="#680000" style="font-size: 30pt">
<span lang="ru">Логистический бизнес-клуб</span></font></b></td>
               <td width="29%">
<p align="center">
<img border="0" src="/my-images/Dudkina_384.jpg" width="350" height="105" align="right"> </td>
            </tr>
         </table>

         <table border="1" width="100%" id="table9">
            <tr>
               <td align="center" bgcolor="#EAA742"><b><font face="Arial">
               <a href="/mission/">Миссия</a></font></b></td>
               <td align="center" bgcolor="#EAA742"><b><font face="Arial">
               <a href="/what-enter-in-club/">Как вступить в Клуб</a></font></b></td>
               <td align="center" bgcolor="#EAA742"><b><font face="Arial">
               <a href="/members-of-the-club/">Члены Клуба</a></font></b></td>
               <td align="center" bgcolor="#EAA742"><b><font face="Arial">
               <a href="/catalogue-enterprise/">Каталог предприятий</a></font></b></td>
               <td align="center" bgcolor="#EAA742"><b><font face="Arial">
               <a href="/business-network/">Форум</a></font></b></td>
            </tr>
         </table>

         <div align="center">

         <table border="0" width="1230" id="table11" cellpadding="0" style="border-collapse: collapse">
            <tr>
               <td width="250">
               <p style="margin: 0 10px" align="left"><i>
               <font face="Arial" style="font-size: 11pt">Бизнес - это
               игра, величайшая игра в мире - если вы знаете, как в неё
               играть.</font></i></p>
               <p style="margin-right: 20px; margin-top: 10px; margin-bottom: 0" align="right">
               <font face="Arial" size="2">Михаил Булгаков</font></td>

               <td align="center" width="730">

<?php
include ("my-files/banner-top.php");    // Верхний баннер
?>

               </td>
               <td width="250">
               <p style="text-indent: 0px; margin-left: 30px; margin-right: 10px; margin-top: 0; margin-bottom: 0" align="left">
               <i><font face="Arial" style="font-size: 11pt">Дружба,
               основанная на бизнесе, лучше бизнеса, основанного на дружбе.</font></i></p>
               <p style="text-indent: 10px; margin-right: 20px; margin-top: 10px; margin-bottom: 0" align="right">
               <font face="Arial" size="2">Уильям Джеймс</font></td>
            </tr>

         </table>
         </div>

<div align="center">КАК ДОБАВИТЬ СТАТЬЮ?</div>

      <table border="0" width="100%" id="table10" style="border-collapse: collapse">
            <tr>
               <td valign="top">

<?php
Core_Page::instance()->execute();
?>

               </td>
               <td width="250" valign="top">
<?php
include ("my-files/banner-right.php");    // Правый баннер
?>
                     </td>
            </tr>
      </table>

<?php
include ("my-files/footer.php");
?>

</div>

</body>

</html>

Модератор 26 сентября 2013 г.

Re: Всплывающее окно

Блок добавили, а вызов?

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

Вы только что начали читать предложение, чтение которого вы уже заканчиваете.

26 сентября 2013 г.

Re: Всплывающее окно

Так вот вызов то и не работает!

(см. http://test.business-only.ru/articles-business/ ссылка Click Me For A Modal вверху по середине).

26 сентября 2013 г.

Re: Всплывающее окно

У всплывающего окна должен быть id "myModal".
Т.е. id="modalCart" заменить на id="myModal"

26 сентября 2013 г.

Re: Всплывающее окно

Так заработало, большое спасибо!

Единственно, что при всплытии окна все вокруг него погружается в непроглядную мглу... Как то жутковато...

НЕльзя ли сделать, чтобы окружающий фон оставался как есть? Либо затемнялся, но немного?

Там такой жуткий ЦСС, я не разобралась...

/*   --------------------------------------------------
   Reveal Modals
   -------------------------------------------------- */

   .reveal-modal-bg {
      position: fixed;
      height: 100%;
      width: 100%;
      background: #000;
      background: rgba(0,0,0,.8);
      z-index: 100;
      display: none;
      top: 0;
      left: 0;
      }

   .reveal-modal {
      visibility: hidden;
      top: 100px;
      left: 50%;
      margin-left: -300px;
      width: 520px;
      background: #eee url(modal-gloss.png) no-repeat -200px -80px;
      position: absolute;
      z-index: 101;
      padding: 30px 40px 34px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
      -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
      -box-shadow: 0 0 10px rgba(0,0,0,.4);
      }

   .reveal-modal.small       { width: 200px; margin-left: -140px;}
   .reveal-modal.medium       { width: 400px; margin-left: -240px;}
   .reveal-modal.large       { width: 600px; margin-left: -340px;}
   .reveal-modal.xlarge       { width: 800px; margin-left: -440px;}

   .reveal-modal .close-reveal-modal {
      font-size: 22px;
      line-height: .5;
      position: absolute;
      top: 8px;
      right: 11px;
      color: #aaa;
      text-shadow: 0 -1px 1px rbga(0,0,0,.6);
      font-weight: bold;
      cursor: pointer;
      }

26 сентября 2013 г.

Re: Всплывающее окно

Селектор .reveal-modal-bg, свойство background.

16 ноября 2014 г.

Re: Всплывающее окно

Примеры уже не работают. Подскажите пожалуйста новичку, как вывести сообщение (с крестиком) для нового посетителя сайта? Желательно подробнее или пракически)

Спасибо

Модератор 17 ноября 2014 г.

Re: Всплывающее окно

1. Примеры работают.
2. Используйте reveal + http://plugins.jquery.com/cookie/

Показывайте сообщение, а в куку записывайте что он закрыл его, чтобы в дальнейшем не показывать.

Вы только что начали читать предложение, чтение которого вы уже заканчиваете.

Авторизация