PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Проблема отображения формы
Nechtus
Отправлено: 03 Марта, 2017 - 19:25:27
Post Id


Новичок


Покинул форум
Сообщений всего: 1
Дата рег-ции: Март 2017  


Помог: 0 раз(а)




дравствуйте, не знаю в правильный ли раздел я написал - надеюсь, что да)

Я реализую систему комментариев, и до последнего момента проблем не возникало, может код и получился слегка сумбурный и грязноватый, но всё работает, как надо. Начал реализовывать кнопки, которые появляются вместе с комментариями, покопался в инете и нашёл скрипт, который выводит при клике модальное окно. Сначало всё сделал для кнопки "ответить". А именно в самом низу сайта скрыта форма, а при клике она появляется отдельным окном и при заполнении с помощью аякса отправляется обрабатываться. Ничего сложного. Так же решил сделать с кнопкой комментировать. Добавил такую же форму вниз, прикрутил стили, и ... вторая форма в FF стала зависеть от стилей первой, хотя они нигде не пересекаются, и все теги закрыты. В хроме и edge всё работает. Далее привожу код.


1. HTML ( привожу весь див связанный с комментариями )

CODE (htmlphp):
скопировать код в буфер обмена
  1.  div class="substrate">
  2.                 <div class="view_comments">
  3.                 <?php if($_SESSION['auth']['user']):?>
  4.                 <?php if($_SESSION['com']):?>
  5.                 <h2>Комментарии</h2>
  6.                     <?php echo $_SESSION['com'];
  7.                    unset($_SESSION['com']);
  8.                    ?>
  9.                 <?php else:?>
  10.                     <p class="no_comments">К данной статье ещё нет ни одного комментария. Но вы можете его написать :)/></p>
  11.                     <div class="no_comments_img"><img  src="<?=TEMPLATE?>img/smile.png"/></div>
  12.                 <?php endif;?>
  13.                 </div>
  14.                 <div class="write_comments"><!-- Форма для написания комментария -->
  15.                     <h2>Написать комментарий</h2>
  16.                     <?php if($_SESSION['com']['error']):?>
  17.                     <div class='com_error'><? echo $_SESSION['com']['error'];
  18.                    unset($_SESSION['com']);                
  19.                    ?>
  20.                     </div>
  21.                     <?php endif;?>
  22.                     <form id="write_form" method="POST" action="#">
  23.                         <textarea cols="62.50" rows="10"  maxlength="90"  id="com_area" class="com_area" name="text"></textarea>
  24.                          <?php foreach($_SESSION['auth']['user'] as $auth):?>
  25.                          <input id="user_name" type="hidden" name="user_name" class="user_name" value="<?=$auth['name']?>" />
  26.                          <input id="bd_name" type="hidden" name="bd_name" class="bd_name" value="articles" />
  27.                          <? $note_id = abs((int)$_GET['id']);?>
  28.                          <input id="note_id" type="hidden" name="note_id" class="note_id" value="<?=$note_id?>" />
  29.                          <input id="parent_id" type="hidden" name="parent_id" class="parent_id" value="0" />
  30.                          <input class="com_answer_upload" id="com_answer_upload" type="submit" name="com_answer_upload" value="Комментировать"  />
  31.                          <?php endforeach;?>            
  32.                     </form>
  33.                     <?php else:?>
  34.                         <? echo "<div class='com_error'> Только зарегистрированные пользователи могут просматривать или писать комментарии!
  35.                        Пожалуйста, <a href='?view=reg'>регистрируйтесь</a>. Если вы авторизовались, то обновите страницу.
  36.                        </div>"; ?>
  37.                     <?php endif;?>
  38.                 </div>
  39.                 <div id="answer"><!-- Выезжающая форма ответа -->
  40.                     <span id="modal_close">X</span>
  41.                     <h2>Ответ на комментарий</h2>
  42.                         <?php if($_SESSION['com']['error']):?>
  43.                         <div class='com_error'><? echo $_SESSION['com']['error'];
  44.                        unset($_SESSION['com']);                
  45.                        ?>
  46.                         </div>
  47.                         <?php endif;?>
  48.                         <form id="answer_form" method="POST" action="#">
  49.                             <textarea cols="62.55" rows="40"  maxlength="100"  id="com_area_answer" class="com_area_answer" name="text"></textarea>
  50.                              <?php foreach($_SESSION['auth']['user'] as $auth):?>
  51.                              <input id="user_name" type="hidden" name="user_name" class="user_name" value="<?=$auth['name']?>" />
  52.                              <input id="bd_name" type="hidden" name="bd_name" class="bd_name" value="articles" />
  53.                              <? $note_id = abs((int)$_GET['id']);?>
  54.                              <input id="note_id" type="hidden" name="note_id" class="note_id" value="<?=$note_id?>" />
  55.                              <input id="com_parent_id" type="hidden" name="parent_id" class="parent_id" value="0" />
  56.                              <input class="answer_upload" id="answer_upload" type="submit" name="answer_upload" value="Ответить"  />
  57.                              <?php endforeach;?>
  58.                        </form>  
  59.                 </div>
  60.                 <div id="overlay"></div><!-- Пoдлoжкa -->
  61.                 <div id="redact_com"><!-- Такаяже форма для редактирования комментария -->
  62.                 <span id="modal_close">X</span>
  63.                      <h2>Редактировать комментарий</h2>
  64.                         <?php if($_SESSION['com']['error']):?>
  65.                         <div class='com_error'><? echo $_SESSION['com']['error'];
  66.                        unset($_SESSION['com']);                
  67.                        ?>
  68.                         </div>
  69.                         <?php endif;?>
  70.                         <form id="redact_form" method="POST" action="#">
  71.                              <textarea cols="62.50" rows="10"  id="area_redact" class="area_redact" name="text"></textarea>
  72.                              <?php foreach($_SESSION['auth']['user'] as $auth):?>
  73.                              <input id="user_name" type="hidden" name="user_name" class="user_name" value="<?=$auth['name']?>" />
  74.                              <input id="bd_name" type="hidden" name="bd_name" class="bd_name" value="articles" />
  75.                              <? $note_id = abs((int)$_GET['id']);?>
  76.                              <input id="note_id" type="hidden" name="note_id" class="note_id" value="<?=$note_id?>" />
  77.                              <input id="parent_id" type="hidden" name="parent_id" class="parent_id" value="0" />
  78.                              <input class="redact_upload" id="redact_upload" type="submit" name="redact_upload" value="Ответить"  />
  79.                              <?php endforeach;?>            
  80.                          </form>  
  81.                 </div>
  82.                 <div id="overlay"></div><!-- Пoдлoжкa -->
  83.             </div>


2. CSS стиль для формы ответа на комментарий ( Для формы редактирования применяются теже стили, только с другим id)
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. /*ответ на комментарий*/
  3. #answer {
  4. width: 515px;
  5. height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
  6. border-radius: 5px;
  7. border: 3px #000 solid;
  8. background: #373737;
  9. position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
  10. top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
  11. left: 50%; /* пoлoвинa экрaнa слевa */
  12. margin-top: -310px;
  13. margin-left: -180px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
  14. display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
  15. opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
  16. z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
  17. padding: 20px 10px;
  18. }
  19. /* Кнoпкa зaкрыть для тех ктo в тaнке) */
  20. #answer #modal_close {
  21. width: 21px;
  22. height: 21px;
  23. position: absolute;
  24. top: 10px;
  25. right: 10px;
  26. cursor: pointer;
  27. display: block;
  28. }
  29. /* Пoдлoжкa */
  30. #overlay {
  31. z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
  32. position:fixed; /* всегдa перекрывaет весь сaйт */
  33. background-color:#000; /* чернaя */
  34. opacity:0.8; /* нo немнoгo прoзрaчнa */
  35. -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
  36. filter:alpha(opacity=80);
  37. width:100%;
  38. height:100%; /* рaзмерoм вo весь экрaн */
  39. top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
  40. left:0;
  41. cursor:pointer;
  42. display:none; /* в oбычнoм сoстoянии её нет) */
  43. }
  44. .answer_upload
  45. {
  46.     width: 120px;
  47.     background: #000;
  48.    padding: 2px 5px 2px 5px;
  49.     border: 1px solid #CDCDE2;
  50.    color: #CDCDE2;
  51.    margin-top:10px;
  52.     border-radius:5px;
  53.     cursor: pointer;
  54. }
  55.  


) Итог следующий
а) Textarea в диве с id = redact_com ( форма редактирования комментария), который расположен под дивом с id = answer (форма ответа на комментариий) не отображается ( причём только в FF!!!), хотя ничего обющего я между этими формами и дивами я не вижу.
скрин

Нажмите для увеличения

б) Но если я меняю у diva с id = answer ( форма ответа) стиль на display: block , то textarea дива с id=redact_com (форма редактирования) становится виден


Нажмите для увеличения


в) В консоле FF есть ошибка ( Забыл сказать, что у меня прикручен TInyMCE).
CODE (htmlphp):
скопировать код в буфер обмена
  1.  TypeError: e is undefined[Подробнее]  tinymce.min.js:13:17430

Так вот эта ошибка пропадает, если textarea видна.

И повторю ещё раз в Хроме и edge - всё работает!!! Почему-то эта проблема только у FireFoxa!!!((( Прошу помогите, у меня уже руки опускаются и голова скоро отвалится от постоянного мозгового штурма(( Я просто не понимаю, как такое вобще может быть((( как два совершенно РАЗНЫХ дива, могут зависить от ОДНОГО свойства, которое прописано только для одного из них.. и причём всё это только при отображении в FF. Я даже не знаю, как правильно загуглить эту проблему, она помоему просто уникальна...

Заранее ОГРОМНОЕ спасибо!!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB