Перекрытие Свернуть/развернуть содержимое в наборе фреймов

Как я могу перекрыть отображение свернутого/расширенного содержимого в наборе фреймов (я не хочу, чтобы детали верхнего фрейма сокращались)? Я использую набор фреймов с тремя фреймами (верхний фрейм, левый фрейм и правый фрейм) и не могу заставить эту вещь работать (скрипт, созданный для перекрытия расширенного содержимого в верхнем фрейме, что-то вроде логики z-index). Возможно ли внести это изменение? пожалуйста, дайте совет. Благодарность

страница набора фреймов

<html>
<FRAMESET rows="18%,*" frameborder="YES"> 
  <frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
  <frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
  <frame src="frame_c.htm">
</frameset>
</html>

рамка страницы

<HTML>

  <HEAD>

    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script language="JavaScript" src="/home/common/popup/popup.js"></script>
    <TITLE>headerFrame.jsp</TITLE>
  </HEAD>    
  <BODY>
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <tr>
          <td width="15% " align="center">TOP FRAME</td>
          <td width="40% " align="left " >TOP FRAME</td>
          <td width="45% " >TOP FRAME</td>
        </tr>
      </table>
    </form>
  </BODY>

</HTML>

Скриншот текущего макета системы. введите здесь описание изображения

Но когда я нажму на ссылку «Развернуть», все детали верхнего кадра будут сокращены. как сделать так, чтобы макет расширенной информации перекрывал верхний кадр? введите здесь описание изображения

ожидаемый результат: введите здесь описание изображения


html frame css expand
person user3835327    schedule 08.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

"пожалуйста, дайте совет"

  • Прекратите использовать фреймы: они не поддерживаются в HTML5.
  • Используйте таблицы, когда вам нужна таблица. Не используйте таблицы для разметки.
  • Всегда указывайте docytpe.
  • Используйте нижний регистр для тегов HTML (или верхний регистр, если хотите, но не смешивайте их)
  • Воспринимайте этот список как рекомендацию, а не как критику. Я тоже делал эти ошибки.

Как вы упомянули в вопросе, это можно исправить с помощью z-index. Проблема, с которой вы столкнулись, может быть решена путем создания абсолютной позиции обеих таблиц (выровненной по верхнему левому краю) и присвоения первой таблице более высокого z-index, чем второй таблицы:

<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script language="JavaScript" src="/home/common/popup/popup.js"></script>
    <TITLE>headerFrame.jsp</TITLE>
  </HEAD>    
  <BODY>
    <form name="mainfrm" method="post">
      <table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
        <tr>
          <td>
            <a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
            <div id="demo" class="collapse">
              <br/><a href="Javascript:popupWindow( 'https://www.google.com.my/') ">testing content</a>
              <br/>
              <input type="button" value="readMore">
            </div>
          </td>
        </tr>
      </table>
      <table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
        </tr>
        <tr>
          <td width="15% " align="center">TOP FRAME</td>
          <td width="40% " align="left " >TOP FRAME</td>
          <td width="45% " >TOP FRAME</td>
        </tr>
      </table>
    </form>
  </BODY>

</HTML>

person Alvaro Montoro    schedule 08.01.2016
comment
Спасибо @Alvaro Montoro, спасибо за рекомендацию и решение !! - person user3835327; 08.01.2016