引导模型在关闭时扰乱格式设置

Question

网址：http://zarwanhashem.com/index2

我不是很强的HTML和CSS。我正在使用我的个人网站的网站模板，我个人添加了一个模型，当你点击项目部分的第一个项目时出现。

当您关闭模型时，这个蓝色的大纲出现在图像周围，我不知道如何去掉它:当我打开/最大化另一个应用程序时，大纲就会消失，但一旦我最小化它，它就会返回。

项目科：

<!-- Portfolio Section -->
<section id="portfolio" class="cbp-so-section cbp-so-init">
    <div class="container cbp-so-side cbp-so-side-top">
        <h1>My Projects</h1>

        <ul id="portfolio-grid" class="row portfolio-row">
            <li class="portfolio-mix col-md-4 ui-design">
                <figure class="portfolio-item">
                    <a href="#" data-toggle="modal"  data-target="#myModal">
                        <img class="img-responsive" src="assets/AIrobot.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>AI Fighter Robot - Java</h3>
                        <p class="portfolio-item-description">This object oriented robot fought            robots created by other students in a third party environment.
                                                              Multiple robots were created in order to test various...</p>
                    </a>
                </figure>
            </li>
            <li class="portfolio-mix col-md-4 web-design">
                <figure class="portfolio-item">
                    <a href="#">
                        <img class="img-responsive" src="assets/spaceInvaders.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>Space Invaders - Python</h3>
                        <p class="portfolio-item-description">An alien shooting game inspired by Tomohiro Nishikado's arcade game of the same name. 
                        The game includes multiple levels with different types of enemies and...</p>
                    </a>
                </figure>
            </li>
            <li class="portfolio-mix col-md-4 add-ons">
                <figure class="portfolio-item">
                    <a href="#">
                        <img class="img-responsive" src="assets/snake.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>Snake - Turing</h3>
                        <p class="portfolio-item-description">Based on the classic arcade game of the same name, Snake
                        includes multiple difficulty levels, secret cheat codes, and... </p>
                    </a>
                </figure>
            </li>
        </ul>
    </div>
    <!-- Modal -->
            <div style="padding-top:80px" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">AI Fighter Robot</h4>
                  </div>
                  <div class="modal-body">
                    An object oriented robot programmed in Java. It fought robots created by other students in an environment 
                    created by a third party. I also created other robots with different strategies and tested them against each 
                    other to determine the best approach. The robot included an offensive and defensive mode, and would switch 
                    between the two depending on the outcome of various calculations. Within each mode there were multiple levels 
                    of calculations to determine the best course of action for the robot to take.
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
</section>
<!-- End of Portfolio Section -->

如果您需要其他代码，请告诉我(我不确定需要什么代码)。你也可以从网站上访问它。不要去/index，去/index2。

Answer 1

我认为你只是出现了一个边框，因为图像是一个链接。

尝试在CSS中添加“outline:none”，用于环绕图像的锚标记。

请参阅http://css-tricks.com/snippets/css/remove-dotted-link-borders/