Проблема с модальными окнами

353
23 января 2018, 10:03

Всем здравствуйте! Недавно начал изучать основу вёрстки. Верстал по макету и столкнулся с двумя проблемами.

  • На скриншоте видно, что подчёркивание точками обозначено шире надписи "Смотреть работу". Как можно выровнить подчёркивание, чтоб оно шло ровно по ширине текста?

  • Проблема с модальными окнами. При нажатии на ссылку "Смотреть работу" должно выходить модальное окно с изображением и описанием.

Но у меня выходит только окно с одной надписью "Описание проекта" больше ничего.

P.S: В самом видео, по которому делал вёрстку, данных проблем не возникало, всё работало чётко и плавно. Также автор данного видео оставил ссылку для загрузки файла с данной вёрсткой, который сверстал на видео. И там также присутствуют эти же проблемы, хотя на видео, как я уже оговаривал, всё хорошо работает. В чём может быть проблема?

body { 
	font-family: 'Open Sans', sans-serif; 
} 
html { 
	font-size: 10px; 
} 
a:active, a:visited, a:focus { 
	text-decoration: none; 
	outline: none; 
} 
.wrapper { 
	display: table-cell; 
	vertical-align: middle; 
} 
.main { 
	position: relative; 
	display:table; 
	width: 100%; 
	text-align: center; 
	color: #fff; 
	height: 100vh; 
	background: #000 url(../img/main-bg.jpg) center center no-repeat; 
} 
.main-overlay { 
	position: absolute; 
	z-index: 1; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(0,0,0,0.5); 
} 
.main h1 { 
	margin-bottom: 1.4rem; 
	font-weight: 300; 
	text-transform: uppercase; 
	font-size: 4.8rem; 
} 
.main p { 
	font-size: 3rem; 
	font-weight: 300; 
} 
.main-header { 
	position: relative; 
	z-index: 2; 
} 
.main-line { 
	width: 200px; 
	height: 1px; 
	background-color: #fff; 
	margin: 0 auto; 
} 
.main-down { 
	position: absolute; 
	color: #fff; 
	z-index: 4; 
	bottom: 2rem; 
	display: inline-block; 
	font-size: 2rem; 
	width: 50px; 
	height: 50px; 
	border-radius: 50%; 
	border: 1px solid transparent; 
	line-height: 50px; 
	left: 50%; 
	margin-left: -25px; 
	transition: 0.2s; 
} 
.main-down:hover { 
	color: #fff; 
	border-color: #fff; 
} 
/* Секция с портфолио */ 
.portfolio { 
	padding: 10rem 0px; 
	text-align: center; 
} 
.section-header { 
	text-transform: uppercase; 
	font-weight: 800; 
	font-size: 3.6rem; 
	margin-bottom: 5rem; 
} 
.portfolio img { 
	width: 100%; 
	max-width: 360px; 
	box-shadow: 0px 4px 29px 0px rgba(87, 92, 97, 0.54); 
} 
.portfolio a { 
	display: block; 
	margin: 2rem auto 6rem; 
	color: #333; 
	width: 17rem; 
	border-bottom: 1px solid transparent; 
} 
.portfolio a:hover { 
	text-decoration: none; 
	border-bottom: 1px dotted #333; 
} 
/* Секция - подвал (footer) */ 
.footer { 
	background-color: #646464; 
	color: #fff; 
	text-align: center; 
	padding: 3rem 0; 
} 
.footer strong { 
	font-weight: 300; 
	font-size: 2.4rem; 
} 
.social-links { 
	margin-top: 1rem; 
} 
.social-links a { 
	width: 5rem; 
	height: 5rem; 
	line-height: 5rem; 
	display: inline-block; 
	color: #fff; 
	border: solid 1px #fff; 
	border-radius: 50%; 
	margin-left: 1rem; 
	margin-right: 1rem; 
	font-size: 2rem; 
	transition: 0.2s; 
} 
.social-links a:hover { 
	background-color: #fff; 
	color: #646464; 
} 
.offer-btn { 
	display: block; 
	width: 80%; 
	max-width: 200px; 
	margin: 1rem auto; 
	border: 1px solid #fff; 
	padding-top: 1rem; 
	padding-bottom: 1rem; 
	color: #fff; 
	border-radius: 100px; 
	transition: 0.2s; 
} 
.offer-btn:hover { 
	text-decoration: none; 
	background-color: #fff; 
	color: #646464; 
} 
.modal img { 
	width: 100%; 
} 
.modal-title { 
	font-weight: 800; 
	font-size: 2rem; 
} 
.close { 
	background-color: transparent; 
	border: none; 
	font-size: 2.5rem; 
	position: absolute; 
	right: 2rem; 
	top: 1rem; 
} 
.modal-btn { 
	display: inline-block; 
	color: #333; 
	border: 1px	solid #333; 
	padding: 10px 20px; 
	border-radius: 5px; 
} 
.modal-btn:hover { 
	background-color: #333; 
	color: #fff; 
	text-decoration: none; 
}
<!DOCTYPE html> 
<html lang="ru"> 
  <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- meta для социальных сетей --> 
    <meta property="og:url" content=""> 
    <meta property="og:type" content="website"> 
    <meta property="og:title" content="Кази Рустамов - верстка сайтов на HTML и CSS"> 
    <meta property="og:image" content=""> 
    <meta property="og:description" content="Закажите разработку сайта без посредников от 5 990 рублей"> 
    <meta property="og:site_name" content="Портфолио верстальщика"> 
    <meta property="article:author" content="Кази Рустамов"> 
    <!-- Заголовок сайта --> 
    <title>Кази Рустамов - Портфолио</title> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/fontello.css"> 
    <link rel="stylesheet" href="css/fontello-embedded.css"> 
    <link href="css/style.css" rel="stylesheet"> 
    <!-- Фавиконка --> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
    <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
  </head> 
  <body> 
    <div class="main"> 
      <div class="main-overlay"></div> 
      <div class="wrapper"> 
        <div class="main-header"> 
        <h1>Кази Рустамов</h1> 
        <div class="main-line"></div> 
        <p>Верстка на HTML и CSS <br> Разработка сайтов под ключ</p> 
      </div> 
      </div> 
      <a class="main-down" href="#"><i class="icon-down"></i></a> 
    </div> 
 
    <div class="portfolio"> 
      <div class="container"> 
        <h2 class="section-header">Портфолио</h2> 
        <div class="row"> 
          <div class="col-lg-4"> 
            <div class="portfolio-block"> 
              <img src="img/portfolio/1.jpg" alt="Работа №1"> 
              <a data-toggle="modal" data-work='work-1' href="#work">Смотреть работу</a> 
            </div> 
          </div> 
          <div class="col-lg-4"> 
            <div class="portfolio-block"> 
              <img src="img/portfolio/2.jpg" alt="Работа №2"> 
              <a data-toggle="modal" data-work='work-2' href="#work">Смотреть работу</a> 
            </div> 
          </div> 
          <div class="col-lg-4"> 
            <div class="portfolio-block"> 
              <img src="img/portfolio/3.jpg" alt="Работа №3"> 
              <a data-toggle="modal" data-work='work-3' href="#work">Смотреть работу</a> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
 
      <div class="footer"> 
        <div class="container"> 
          <div class="row"> 
            <div class="col-lg-3"> 
              <strong>Кази Рустамов</strong> 
              <p>Разработка сайтов <br> под ключ</p> 
            </div> 
            <div class="col-lg-6"> 
              <strong>Подпишитесь</strong> 
              <div class="social-links"> 
                <a href="#"><i class="icon-vk"></i></a> 
                <a href="#"><i class="icon-instagram"></i></a> 
                <a href="#"><i class="icon-twitter"></i></a> 
              </div> 
            </div> 
            <div class="col-lg-3"> 
              <strong>Напишите мне</strong> 
              <a href="https://vk.me/rustamov_17" target="_blank" class="offer-btn">Заказать сайт</a> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
 
 
    <!-- Всплывающие окна --> 
<div class="modal fade" id="work" role="dialog"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title">Описание проекта</h4> 
      </div> 
      <div class="modal-body"> 
         
      </div> 
    </div> 
  </div> 
</div> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
      $(function() { 
        var link = $('a[data-toggle="modal"]'); 
        link.on('click', function(event) { 
          var work = $(this).link.attr('data-work'); 
          var modal = $('.modal'); 
          modal.find('.modal-body').load(work+'.html'); 
      }); 
     });    
    </script> 
  </body> 
</html>

Answer 1

Всё потому что в видео в котором ты смотришь, он использует функцию load в JQuery котором загрузка контента модального окна идет с отдельного .html файла.

А он работает только если запущен сервер, и локально он работать не будет. Запусти какой нибудь локальный сервер и всё заработает.

А насчет ссылок, сделай ссылку строчно-блочной, и обводка будет точно по размеру самого текста.

READ ALSO
Почему в таблице при `border-collapse: separate` не отображается border-top у thead?
CSS

Почему в таблице при `border-collapse: separate` не отображается border-top у thead?

Если я ставлю параметр border-collapse: collapse, то border - видноЧем регулируется это поведение?

 232
C# XMl || XmlNode.AppendChild
c#

C# XMl || XmlNode.AppendChild

Требуется к указанному узлу добавить дочерний узелИсключений не возникает, но файл data

 231
как получить сертификат из из хранилища ОС
c#

как получить сертификат из из хранилища ОС

Получил задание: "Получить и проверить цифровую подпись файла, в качестве пары ключей использовать само подписанный сертификат X509 который...

 301
Как выделить из текста имена? C#
c#

Как выделить из текста имена? C#

В функцию поступает текст в виде строки (производной длины тк

 319