Question

这就是我正在努力的...一个可以通过超链接调用的可最大化和最小化的弹出窗口。

<html>
<style type="text/css">
  .pop_out {
    background: #333;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 0px 10px #000;
  }
  .minimized {
    display: inline-block;
    margin-right: 10px;
    bottom: 0;
    width: 250px;
    height: 60px;
    overflow: hidden;
  }
  .maximized {
    top: 0;
    position: fixed;
    display: block;
    width: auto;
    height: auto;
    /* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
  }
  .close_pop {
    cursor: pointer;
    color: #fff;
  }
  .close_pop:hover {
    color: red;
  }
  .expand_collapse {
    margin-right: 10px;
    cursor: pointer;
    color: #fff;
    height: 3px;
  }
  .expand_collapse:hover {
    color: #ccc;
  }
  a {
    position: fixed;
    top: 150;
  }
</style>
<script type="text/javascript">
  var max = true;

  function expand_collapse(elem) {
    var top_div = elem.parentNode.parentNode.parentNode;
    if (max === false) {
      elem.innerHTML = "&#9660;";
      top_div.classList.toggle("minimized", false);
      top_div.classList.toggle("maximized", true);
      max = true;
    } else if (top_div.classList.contains("maximized")) {
      elem.innerHTML = "&#9650;";
      top_div.classList.toggle("minimized", true);
      top_div.classList.toggle("maximized", false);
      max = false
    }
  }

  function close_pop(elem) {
    var top_div = elem.parentNode.parentNode.parentNode;
    top_div.style.display = 'none';
    if (top_div.classList.contains("maximized")) {
      max = false;
    }
  }
</script>
<a href="#">CLICK HERE</a><!--Right Here -->
<div style="position:fixed;bottom:0px;">
  <div class="pop_out maximized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9660;</span>
      <span class="close_pop" onclick="close_pop(this);">&times</span></span>
    </div>
    <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
      laborum.</div>
  </div>

</div>

但弹出窗口随页面打开，我希望弹出窗口仅在单击超级链接时打开，而不是在页面加载时打开。任何帮助都感激不尽。我在超链接上尝试了不同的方法，但无济于事。

Answer 1

弹出元素在初始页面加载时不会被隐藏。

在CSS中为弹出元素添加样式。

display:none

为弹出元素提供ID属性，以便更轻松地进行Javascript定位 id="pop1"

为超链接添加属性

onclick="open_pop('#pop1')"

添加javascript功能

function open_pop(elem)
{
   elem.style.display = 'block';
}

或者为了更有效地与代码同步，请弹出一个自定义类来修改显示样式。

我还会考虑使用ID来进行Javascript选择，而不是通过父级进行爬行，这可能会破坏代码，如果是子元素或在树中添加或删除。

Answer 2

请查看以下链接

$(document).ready(function() {
  $('.show-popup').on('click', function() {
    $('.popup').fadeIn();
  });
  $('.close_pop').on('click', function() {
    $('.popup').fadeOut();
  });
});

.popup {
  display: none;
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.minimized {
  display: inline-block;
  margin-right: 10px;
  bottom: 0;
  width: 250px;
  height: 60px;
  overflow: hidden;
}
.maximized {
  top: 0;
  position: fixed;
  display: block;
  width: auto;
  height: auto;
  /* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
  cursor: pointer;
  color: #fff;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
  color: #fff;
  height: 3px;
}
.expand_collapse:hover {
  color: #ccc;
}
a {
  position: fixed;
  top: 150;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
  <div class="pop_out maximized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9660;</span>
      <span class="close_pop">&times</span></span>
    </div>
    <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
      laborum.
    </div>
  </div>

</div>

Answer 3

用简单的代码，

HTML

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

的javascript

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

我无法分享我的jsfiddle链接。所以这对我有帮助。

或者

只需在鼠标点击时点击style = "display:none"即可切换显示。

如何创建DIV链接

3 个答案:

或者