Member 13940163 Ответов: 1

Почему скрипты Bootstrap jquery не работают на моей веб-странице?


I'm trying to add a popover that gets triggered by a button, using bootstrap 4. The button code is copied straight from bootstrap, and the javascript element that makes the popover get dismissed by clicking, (also from bootstrap) is pasted right under the three mandatory jQuery scripts from bootstrap's starter template--before the body closing tag. The code below is not my site, but another html file where I tried isolating the problem. It only contains the popover button and javascript code from bootstrap, nothing else. I followed directions exactly, so I'm not sure where it went wrong. The popover dismiss script target a class called "popover-dismiss," so I added that class to the button above. A little window is supposed to appear when you click the button. Instead, nothing happens when you click the button. If someone who is familiar with Bootstrap (I'm new to it) can take a look and tell me if they can spot the problem, I'd be very grateful!

Что я уже пробовал:

<!doctype html>
	<html>
		<body>
			<button type="button" class="popover-dismiss" data-container="body" data-toggle="popover" data-placement="right" data-content="This is a popover.">
			  popover test
</button>


 <!-- jQuery first, then Popper.js, then Bootstrap JS -->

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



 
		<script>jQuery('.popover-dismiss').popover({
  			trigger: 'focus'})
		</script>
  
	</body>
</html>

1 Ответов

Рейтинг:
2

Bryian Tan

Основываясь на том, что приведено здесь, похоже, что в коде отсутствует таблица стилей

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Обновил с начальной загрузки стилей[^]