1
[OK]を私はこのブートストラップテンプレートダウンロード：私はいくつかのものを変更したが、メインのコードがまだそこにある https://blackrockdigital.github.io/startbootstrap-freelancer/ブートストラップテンプレート - フリーランサー - 変更ポートフォリオテキスト
を。このページはどのように見えるかです： 
を使用すると、3枚のカード（HTMLやPHPやAndroid）のいずれかをクリックすると、それは、[OK]を絵とタイトルが表示さもちろんの記述は、それが常にあり、間違っていますhtmlテキスト 
私が変えてみました：
// Popup initialization
var popup = new Popup();
if(popup.title=="Android"){
popup.setContent(androidText);
};
これは動作しませんでした：
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
var popup2 = new Popup();
popup.setContent(phpText);
var popup3 = new Popup();
popup.setContent(androidText);
var modal = new Modal("modal", popup);
var modal2 = new Modal("modal", popup2);
var modal3 = new Modal("modal", popup3);
私はまた、ポップアップでこれを追加してみました。
どのように各ポップアップごとに異なる説明を設定しますか？
<!DOCTYPE html>
<html>
<head>
<title>Team Logic Education Center</title>
<!-- Support for Serbian Latin -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google font: Montserrat (400, 500, 600, 700) -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<!-- Google font: Lato (400, 700) -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head>
<!-- Body CSS -->
<link href="css/body.css" rel="stylesheet">
<!-- Header CSS and JS -->
<link href="css/header.css" rel="stylesheet">
<script src="js/header.js"></script>
<!-- Content CSS -->
<link href="css/content.css" rel="stylesheet">
<!-- Section CSS -->
<link href="css/section.css" rel="stylesheet">
<!-- Course CSS and JS -->
<link rel="stylesheet" href="css/course.css">
<script src="js/coursebox.js"></script>
<!-- Contact CSS and JS -->
<!-- <link href="css/contact.css" rel="stylesheet">
<script src="js/contact.js"></script> -->
<!-- Modal CSS and JS -->
<link href="css/modal.css" rel="stylesheet">
<script src="js/modal.js"></script>
<!-- Popup CSS and JS -->
<link href="css/popup.css" rel="stylesheet">
<script src="js/popup.js"></script>
<!-- Data -->
<script src="js/data.js"></script>
</head>
<body>
<!-- Header -->
<div id="header">
<!-- Content inserted via JS -->
</div>
<!-- Popup window (which is modal) -->
<div id="modal">
<!-- Content inserted via JS -->
</div>
<div class="content">
<!-- In-page link for logo section -->
<a class="inlink" id="pocetna"></a>
<!-- Logo section -->
<div class="section green">
<img class="logo" src="Images/TL.png">
<h1>Team Logic Education Center</h1>
</div>
<!-- In-page link for course section -->
<a class="inlink" id="kursevi"></a>
<!-- Course section -->
<div class="section white">
<h1>Kursevi</h1>
<hr>
<div id="courseBox">
<!-- Content inserted via JS -->
</div>
</div>
<!-- In-page link for about section -->
<a class="inlink" id="onama"></a>
<!-- About section -->
<div class="section green">
<h1>O Nama</h1>
<hr>
<p id="content" class="columns" style="max-width: 600px; margin: auto">
<!-- Content inserted via JS -->
</p>
</div>
<!-- In-page link for prices section -->
<a class="inlink" id="cenovnik"></a>
<!-- Prices section -->
<div class="section bluePrice">
<h1>Cenovnik</h1>
<hr>
<p id="contentCenovnik" class="columns" style="max-width: 600px; margin: auto">
<table align="center" style="font-family: Montserrat;">
<tr style="color:white; background-color: #17222c;">
<td>Kurs</td>
<td>Cena</td>
<td>Vreme trajanja</td>
</tr>
<tr>
<td>HTML + CSS + JS </td>
<td>100€</td>
<td>90 min/1 mesec</td>
</tr>
<tr>
<td>PHP</td>
<td>100€</td>
<td>90 min/1 mesec</td>
</tr>
<tr>
<td>Android</td>
<td>150€</td>
<td>90 min/1 mesec</td>
</tr>
</table>
</p>
</div>
<!-- In-page link for contact section -->
<a class="inlink" id="kontakt"></a>
<!-- Contact section -->
<div class="section white">
<h1>Kontakt</h1>
<hr>
<div style="font-family: Lato; font-size: 20px; color: #2C3E50; max-width: 600px; margin: auto">
<div style="float:left;"> <img src="Images/MSG.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> [email protected] </span> </div>
<div style="float:right;"><img src="Images/MOB.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> +381 (0)63 44 21 56 </span> </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="map" style="width:100%;height:400px">
</div>
<!-- Information section -->
<!-- <div class="section lightBlue">
</div> -->
<!-- Footer section -->
<div class="section darkBlue">
<footer>
<a href="https://www.facebook.com/TeamLogicComputers/"> Facebook </a> | <a href="https://www.linkedin.com/in/nemanja-jovanovic-1a769b143"> Linkedin </a> | <a href="skype:jovanovic.108?userinfo"> Skype </a><br>
© 2017 TeamLogic. Sva prava zadržana.
</footer>
</div>
</div>
</body>
<script>
// Header initialization (using data.js)
var header = new Header("header");
for(var i = 0; i < links.length; i++) {
header.addLink(
links[i].text,
links[i].href,
links[i].className
);
}
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
// var popup2 = new Popup();
// popup.setContent(lorem);
//
// var popup3 = new Popup();
// popup.setContent(phpText);
var modal = new Modal("modal", popup);
//
// var modal2 = new Modal("modal", popup2);
// var modal3 = new Modal("modal", popup3);
// Course box initialization (using data.js)
var courseBox = new CourseBox("courseBox");
for(var i = 0; i < courseItems.length; i++) {
courseBox.addItem(
courseItems[i].text,
courseItems[i].color
);
}
courseBox.setCallback(function (text, color) {
popup.setTitle(text);
popup.setCaption(text);
popup.setCaptionBgColor(color);
modal.open();
});
// About section initialization (using data.js)
var content = document.getElementById("content");
content.innerHTML = lorem;
// Prices section initialization (using data.js)
// var contentCenovnik = document.getElementById("contentCenovnik");
// contentCenovnik.innerHTML = cene;
// Google map
function myMap() {
var myCenter = new google.maps.LatLng(43.332859, 21.908850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
これはpopup.jsです：
function Popup() {
var self = this;
self.callback = null;
self.setTitle = function (title) {
self.popupTitle.innerHTML = title;
}
self.setCaption = function (caption) {
self.imgBoxCap.innerHTML = caption;
}
self.setCaptionBgColor = function (bgColor) {
self.imgBoxCap.style.backgroundColor = bgColor;
}
self.setContent = function (content) {
self.popupContent.innerHTML = content;
}
self.open = function() {
self.container.className = "popup";
}
self.close = function() {
self.container.className = "popup zoomOut";
}
self.onClose = function() {
if (self.callback != null) {
self.callback();
}
}
self.setCallback = function(callback) {
self.callback = callback;
}
self.crossItem = document.createElement("div");
self.crossItem.className = "cross";
self.crossItem.addEventListener("click", self.onClose);
self.crossItem.innerHTML = "×";
self.crossBox = document.createElement("div");
self.crossBox.className = "crossBox";
self.crossBox.appendChild(self.crossItem);
self.popupTitle = document.createElement("div");
self.bar = document.createElement("div");
self.bar.className = "bar";
self.bar.appendChild(self.popupTitle);
self.bar.appendChild(self.crossBox);
self.imgBoxCap = document.createElement("div");
self.imgBoxCap.className = "imgBoxCap";
self.imgBox = document.createElement("div");
self.imgBox.className = "imgBox";
self.imgBox.appendChild(self.imgBoxCap);
self.popupContent = document.createElement("p");
self.middle = document.createElement("div");
self.middle.className = "middle";
self.middle.appendChild(self.imgBox);
self.middle.appendChild(self.popupContent);
self.container = document.createElement("div");
self.container.className = "popup none";
self.container.appendChild(self.bar);
self.container.appendChild(self.middle);
}
これは完全なHTMLです
// Popup initialization
var popup = new Popup();
if(CourseBox.text=="Android"){
popup.setContent(phpText);
} else {
popup.setContent(htmlText);
};
しかし、すべての記述は今phpTextです。 ..