Я использую модал в своем учебном проекте, и я использовал модал класс начальной загрузки по клику «Добавить пост».Но проблема в том, что когда я нажимаю на кнопку «Добавить сообщение», ничего не происходит, я не могу найти ошибку.
Если кто-нибудь знает, в чем проблема, предложите мне.Я добавил $ ("[data-toggle = 'modal']"). Modal ();в моем скрипте тоже.
Ниже мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Blogen</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<!-- HEADER -->
<header id="main-header" class="py-2 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><i class="fas fa-cog"></i> Dashboard</h1>
</div>
</div>
</div>
</header>
<!-- ACTIONS -->
<section id="actions" class="py-4 mb-4 bg-light">
<div class="container">
<div class="row">
<div class="col-md-3">
<a
href="#"
class="btn btn-primary btn-block"
data-toggle="modal"
data-target="#addPostModal"
>
<i class="fas fa-plus"></i> Add Post
</a>
</div>
</div>
</div>
</section>
<!-- MODALS -->
<!-- ADD POST MODAL -->
<div class="modal fade" id="addPostModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">Add Post</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control">
<option value="">Web Development</option>
<option value="">Tech Gadgets</option>
<option value="">Business</option>
<option value="">Health & Wellness</option>
</select>
</div>
<div class="form-group">
<label for="image">Upload Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" />
<label for="image" class="custom-file-label"
>Choose File</label
>
</div>
<small class="form-text text-muted">Max Size 3mb</small>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea name="editor1" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">
Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
<div class="container">
<div class="row">
<div class="col">
<p class="lead text-center">
Copyright ©
<span id="year"></span>
Blogen
</p>
</div>
</div>
</div>
</footer>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script>
//get the current year of copyright
$("#year").text(new Date().getFullYear());
$("[data-toggle='modal']").modal();
CKEDITOR.replace("editor1");
</script>