我正在使用纯 js 代码使用来自 codepen.io 的一支笔来显示带有词云的模式弹出窗口。我没有得到带有 wordcloud 弹出窗口的预期结果，而我只是得到一个 wordcloud 而不是模型弹出窗口。谁能指导我为什么它不提供模态弹出窗口。这是他的代码:
HTML
<html>
<head>
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
</head>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><div id="word-cloud"></div></h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</html>
CSS
#word-cloud{
height: 100vh;
width: 100vw;
margin: 0 auto;
}
body, html{
margin: 0;
padding: 0;
}
JS
/* ======================= SETUP ======================= */
var config = {
trace: true,
spiralResolution: 1, //Lower = better resolution
spiralLimit: 360 * 5,
lineHeight: 0.8,
xWordPadding: 0,
yWordPadding: 3,
font: "sans-serif"
}
var words = ["words", "are", "cool", "and", "so", "are", "you", "inconstituent", "funhouse!", "apart", "from", "Steve", "fish"].map(function(word) {
return {
word: word,
freq: Math.floor(Math.random() * 50) + 10
}
})
words.sort(function(a, b) {
return -1 * (a.freq - b.freq);
});
var cloud = document.getElementById("word-cloud");
cloud.style.position = "relative";
cloud.style.fontFamily = config.font;
var traceCanvas = document.createElement("canvas");
traceCanvas.width = cloud.offsetWidth;
traceCanvas.height = cloud.offsetHeight;
var traceCanvasCtx = traceCanvas.getContext("2d");
cloud.appendChild(traceCanvas);
var startPoint = {
x: cloud.offsetWidth / 2,
y: cloud.offsetHeight / 2
};
var wordsDown = [];
/* ======================= END SETUP ======================= */
/* ======================= PLACEMENT FUNCTIONS ======================= */
function createWordObject(word, freq) {
var wordContainer = document.createElement("div");
wordContainer.style.position = "absolute";
wordContainer.style.fontSize = freq + "px";
wordContainer.style.lineHeight = config.lineHeight;
/* wordContainer.style.transform = "translateX(-50%) translateY(-50%)";*/
wordContainer.appendChild(document.createTextNode(word));
return wordContainer;
}
function placeWord(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth/2 + "px";
word.style.top = y - word.offsetHeight/2 + "px";
wordsDown.push(word.getBoundingClientRect());
}
function trace(x, y) {
// traceCanvasCtx.lineTo(x, y);
// traceCanvasCtx.stroke();
traceCanvasCtx.fillRect(x, y, 1, 1);
}
function spiral(i, callback) {
angle = config.spiralResolution * i;
x = (1 + angle) * Math.cos(angle);
y = (1 + angle) * Math.sin(angle);
return callback ? callback() : null;
}
function intersect(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth/2 + "px";
word.style.top = y - word.offsetHeight/2 + "px";
var currentWord = word.getBoundingClientRect();
cloud.removeChild(word);
for(var i = 0; i < wordsDown.length; i+=1){
var comparisonWord = wordsDown[i];
if(!(currentWord.right + config.xWordPadding < comparisonWord.left - config.xWordPadding ||
currentWord.left - config.xWordPadding > comparisonWord.right + config.wXordPadding ||
currentWord.bottom + config.yWordPadding < comparisonWord.top - config.yWordPadding ||
currentWord.top - config.yWordPadding > comparisonWord.bottom + config.yWordPadding)){
return true;
}
}
return false;
}
/* ======================= END PLACEMENT FUNCTIONS ======================= */
/* ======================= LETS GO! ======================= */
(function placeWords() {
for (var i = 0; i < words.length; i += 1) {
var word = createWordObject(words[i].word, words[i].freq);
for (var j = 0; j < config.spiralLimit; j++) {
//If the spiral function returns true, we've placed the word down and can break from the j loop
if (spiral(j, function() {
if (!intersect(word, startPoint.x + x, startPoint.y + y)) {
placeWord(word, startPoint.x + x, startPoint.y + y);
return true;
}
})) {
break;
}
}
}
})();
/* ======================= Draw the placement spiral if trace lines is on ======================= */
(function traceSpiral() {
traceCanvasCtx.beginPath();
if (config.trace) {
var frame = 1;
function animate() {
spiral(frame, function() {
trace(startPoint.x + x, startPoint.y + y);
});
frame += 1;
if (frame < config.spiralLimit) {
window.requestAnimationFrame(animate);
}
}
animate();
}
})();
这是我用于相同 https://codepen.io/KARANVERMA5/pen/oqKJma 的代码笔链接.请指出我正确的方向。在这里，我显示了从标记头内部加载的模态弹出窗口。即使当我在 head 中使用完整的 js 时，它似乎也无法正常工作，甚至 wordcloud 也往往会失败。
最佳答案
我从 Mosh Feu 评论中得到了答案，我没有在导致问题的 header 中包含引导脚本。
添加这个解决了我的问题:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于javascript - 如何制作显示文字云的模态弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49875785/