Question

在ollynural.github.io上，在投资组合页面中，我试图模拟一个弹出式div，提供有关您点击的项目的更多信息。要退回弹出窗口，我添加了一个ng-click，所以当你点击主要的组合弹出容器时，弹出窗口就会被移除。

是否有可能只展示组合弹出div的部分（不在照片上或说明白框中），一旦点击就删除了主div？所以你可以在图片和白框上自由点击

<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
            <div class="row">
                <div class="col-xs-12">
                    <img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
                </div>
                <div class="col-xs-12 pop-up-container">
                    <div class="pop-up-row">
                        <div class="col-xs-9" style="background: red">
                            <h1>
                                {{portfolioTitle}}
                            </h1>
                            <p>
                                {{portfolioDescription}}
                            </p>
                        </div>
                        <div class="col-xs-3" style="background: cyan">
                             <a href="{{portfolioLink}}">Click me</a>
                             <div ng-repeat="tech in portfolioTech">
                                {{tech}}
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JS

$scope.losePortfolioFocus= function() {
    angular.element('.portfolio-pop-up').css("display", "none");
}

CSS

.portfolio-pop-up {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.70);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

任何帮助将不胜感激，如果需要可以发布更多的CSS或代码

Answer 1

您可以停止在包含弹出窗口内容的元素上传播click事件，如下所示：

<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
  <div class="row" ng-click="$event.stopPropagation()">
  ...
  </div> 
</div>

这样，弹出窗口内的点击不会触发losePortfolioFocus()处理程序。

Answer 2

我建议您从事件'目标中抓取事件链并检查您的pop-up-container是否在那里。这样，您就可以区分弹出窗口中的单击或其中的单击。

Angular - 检测单击背景div但不在div内

2 个答案: