ccorrada
/
CarDieAleCa
關註 2
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

Add popup on articles

Carlos Hernandez 3 年之前
父節點
4746bfb50f
當前提交
5055e56314
共有 4 個文件被更改，包括 59 次插入 和 23 次删除
分割檢視 顯示文件統計
  1. 0
    1
      Files-API/articles/article_4.txt
  2. 1
    22
      app_template/www/articles.html
  3. 12
    0
      app_template/www/css/main.css
  4. 46
    0
      app_template/www/fetch_articles.js

+ 0
- 1
Files-API/articles/article_4.txt 查看文件 

@@ -1 +0,0 @@
1 
-Hello world!

+ 1
- 22
app_template/www/articles.html 查看文件 

@@ -53,28 +53,7 @@
53 53 
 		<script src="sortposts.js"></script>
54 54
55 55 
 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
56 
-		<script>
57 
-			var articles;
58 
-			axios.get(`http://localhost:5000/articles`)
59 
-					.then(response => {
60 
-						articles = response.data;
61 
-
62 
-						for (element of articles) {
63 
-							axios.get(`http://localhost:5000/articles/${element}`)
64 
-								.then(response => {
65 
-									let articlesHeading = document.querySelector("#articles-heading").parentElement;
66 
-									let articleDiv = document.createElement("button");
67 
-									articleDiv.textContent = response.data;
68 
-
69 
-									articleDiv.classList.add("m-5", "article-content");
70 
-									articlesHeading.appendChild(articleDiv);
71 
-								})
72 
-								.catch(error => console.error(error));
73 
-						}
74 
-					})
75 
-					.catch(error => console.error(error));
76 
-
77 
-		</script>
56 
+		<script src="fetch_articles.js"></script>
78 57 
 	</head>
79 58 
 	<body>
80 59 
 	<header role="banner" id="fh5co-header">

+ 12
- 0
app_template/www/css/main.css 查看文件 

@@ -40,3 +40,15 @@ button.article-content {
40 40 
     top: 0;
41 41 
     background: linear-gradient(transparent 150px, white);
42 42 
 }
43 
+
44 
+.modal-content {
45 
+    background-color: rgb(75, 75, 75) !important;
46 
+}
47 
+
48 
+.modal button.btn.btn-secondary {
49 
+    background-color: rgb(59, 59, 59) !important;
50 
+}
51 
+
52 
+.modal button.close {
53 
+    color: rgb(255, 0, 0) !important;
54 
+}

+ 46
- 0
app_template/www/fetch_articles.js 查看文件 

@@ -0,0 +1,46 @@
1 
+var articles;
2 
+axios.get(`http://localhost:5000/articles`)
3 
+    .then(response => {
4 
+        articles = response.data;
5 
+        for (let i = 0; i < articles.length; i++) {
6 
+            let element = articles[i];
7 
+            axios.get(`http://localhost:5000/articles/${element}`)
8 
+                .then(response => {
9 
+                    let articlesHeading = document.querySelector("#articles-heading").parentElement;
10 
+                    let articleButton = document.createElement("button");
11 
+                    articleButton.textContent = response.data;
12 
+
13 
+                    articleButton.classList.add("m-5", "article-content");
14 
+                    articleButton.setAttribute("data-toggle", "modal");
15 
+                    articleButton.setAttribute("data-target", `#articleModal${i}`);
16 
+
17 
+                    let modal = document.createElement("div");
18 
+                    modal.classList.add("modal", "fade");
19 
+                    modal.setAttribute("id", `articleModal${i}`);
20 
+                    modal.setAttribute("tabindex", "-1");
21 
+                    modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
22 
+                    modal.setAttribute("aria-hidden", "true");
23 
+                    modal.innerHTML = `
24 
+                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
25 
+                            <div class="modal-content">
26 
+                                <div class="modal-header">
27 
+                                    <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
28 
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
29 
+                                        <span aria-hidden="true">&times;</span>
30 
+                                    </button>
31 
+                                </div>
32 
+                                <div class="modal-body">
33 
+                                    ${response.data}
34 
+                                </div>
35 
+                                <div class="modal-footer">
36 
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
37 
+                                </div>
38 
+                            </div>
39 
+                        </div>`;
40 
+                    document.body.appendChild(modal);
41 
+                    articlesHeading.appendChild(articleButton);
42 
+                })
43 
+                .catch(error => console.error(error));
44 
+        }
45 
+    })
46 
+    .catch(error => console.error(error));