小编Bhu*_*wan的帖子

我已经使用CSS编写了自己的模态类，并在我的应用程序中成功使用了它。但是我面临的问题是当覆盖层打开时，我仍然可以滚动背景内容。打开模态/叠加时如何停止滚动背景内容？

这是我的模式，它在叠加层的顶部打开

<div>
  <div className="overlay"></div>
  {this.props.openModal ?
  <div>
    <div className="polaroid sixten allcmnt_bg_clr horiz_center2">
      {}
      <div className="mobile_header">
        <PostHeader/>
      </div>
      <div className="mobile_renderPost">
        { this.renderPostType() }
      </div>
      <div className="mobile_post_bottom"></div>
    </div>
  </div> : null}
</div>

我的叠加CSS

.overlay {
  background-color: rgba(0, 0, 0, .70);
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  left: 0;
  right: 0;
  -webkit-transition: opacity .25s ease;
  z-index: 1001;
  margin: 0 auto;
}

我有这样的条件

<table   ng-if="name=='john' && name=='MARK'">
//rest of the code
</table>

当ng-if为true时,我的代码将执行.

现在我的疑问是,即使名字是大写和小写,ng-if也应该是真的.

<table   ng-if="name=='JOhN' && name=='maRK'">
    //rest of the code
    </table>

可能吗？我也试过这个if-else条件.

if(name.toString()='john'){
alert('success')
}
else{
alert('failure')
}

这是对的吗？

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" …

我想要上面的结果,不能使用图像,因为div的高度不固定.

任何帮助都会得到满足.

我想选择子'.comment'元素slideToggle它每次我点击'.item'元素.HTML代码:

<div class="row col-md-12 item">
  <div class="col-md-4">Name</div>
  <div class="col-md-4">degree of usage</div>
  <div class="col-md-4">price</div>
  <div class="col-md-12 comment">comment</div>
</div>

Js代码

$('.item').on('click', (event) => {
  $('.item > .comment').slideUp(200);
  $(this).find('.comment').slideToggle(200);
});

似乎slideUp效果可以正常工作,但$(this).find无法捕获其中的'.comment'元素.

我有以下标记:

<table>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
    <td><input type="radio" name="radio"></td>
  </tr>
</table>

这是一张3x3的桌子,里面有9个单选按钮.我想配置它,以便我可以:

• 每行仅选择1个单选按钮或
• 每列仅选择1个单选按钮

这可能没有任何JavaScript吗？谢谢!

我想给我的第一个和最后<td>一个，border-radius以便我的桌子看起来像一个圆桌。

首先，我将background应用于我的对象<td>，然后添加border-radius，我认为它可以很好地工作（background从角落四舍五入）。

之后，当我对我的边框应用边框时<td>，我看到了一件奇怪的事情（请参见下面的代码片段）。

因此，我的问题是为什么边框没有四舍五入为背景？

堆栈片段

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

我在我的css中有这个div:

div {
  background-color: white;
  -webkit-animation-name: colorChange;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 100s;
}

@-webkit-keyframes colorChange {
  0% {
    background-color: white;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

唯一的问题是我需要div在转换完成后保持红色,然后不再回到初始的白色.任何建议或甚至更好的方式来实现这个在jquery？

我真的很想说"5分钟后换成黄色,再过5分钟换成红色并保持红色",而不是像这样过渡.

我想在:before(\F002手工玻璃标记)中使用FontAwesome .但它不起作用.(:重点工作)

我错过了什么？

.font-awesome {
  border-radius: 15px;
  border: 1px solid gray;
  padding: 0 15px 0 30px;
  line-height: 30px;
  outline: none;
}

.font-awesome:focus {
  border-color: lightblue;
}

.font-awesome:before {
  font-family: FontAwesome;
  content: "\f002";
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<input type="text" class="font-awesome" />

因此，我有一个带有下拉菜单的粘性导航栏，可以让我跳转到页面的不同部分。但是，当我跳转到不同的部分时，导航栏会覆盖我跳转到的 div 的开头。我检查了导航栏，它的高度为 58，带有填充和所有内容。如何将跳转偏移 58 像素，以便 div 与粘性顶部齐平，并且不会遮挡启动 div 的标题？

例如下面是我的网站

当我单击“教育”时，它会切断“教育”标题，并且与我的navbar.