Question

好的，我下载了这个bootstrap模板 - Freelancer： https://blackrockdigital.github.io/startbootstrap-freelancer/

我改变了一些东西，但主要代码仍在那里。这是页面的外观： 当您点击三张卡片中的任何一张（HTML或PHP或Android）时，它会显示图片和标题，但课程描述错误，它始终是HTML文字。

我尝试更改：

// 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);

我也尝试在Popup中添加它：

    // Popup initialization
var popup = new Popup();
if(popup.title=="Android"){
  popup.setContent(androidText);

};

这不起作用。

如何为每个弹出式窗口设置不同的说明？

这是完整的html：

    <!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&euro;</td>
          <td>90 min / 1 mesec</td>
        </tr>
        <tr>
          <td>PHP</td>
          <td>100&euro;</td>
          <td>90 min / 1 mesec</td>
        </tr>
        <tr>
          <td>Android</td>
          <td>150&euro;</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@blablac.com </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>&nbsp; | &nbsp; <a href="https://www.linkedin.com/in/nemanja-jovanovic-1a769b143"> Linkedin </a>&nbsp; | &nbsp; <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 = "&times;";

  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);  
}

还试过这个：

    // Popup initialization
var popup = new Popup();
if(CourseBox.text=="Android"){
  popup.setContent(phpText);
} else {
  popup.setContent(htmlText);
};

但现在每个描述都是phpText ......

Answer 1

已修复：

    courseBox.setCallback(function (text, color) {
  console.log(text);
  popup.setTitle(text);

  //HERE
  if (text=="HTML + CSS + JS") {
    popup.setCaption(text);
    popup.setContent(htmlText);
  } else if(text=="PHP") {
    popup.setCaption(text);
    popup.setContent(phpText);
  } else {
    popup.setCaption(text);
    popup.setContent(androidText);
  };

  popup.setCaptionBgColor(color);
  modal.open();
});

Bootstrap模板 - 更改投资组合文本

1 个答案: