Question

在过去的几天里，我一直在努力使某些工作正常进行，但似乎无法通过搜索找到解决方案。我已经found a fix解决了部分问题，效果很好。但是，每次尝试解释问题的最后一部分时，我似乎都找不到正确的词，因此希望我在这里能很好地解释它。

codepen.io示例不是我的示例，它仅包含我用于此问题的部分修复程序。

请see this page告诉我我目前在哪里。

基本上，每个主要问题都有一组子问题。单击这些主要问题之一后，它将激活一些JavaScript，这些JavaScript隐藏原始内容并显示一些新内容。这对于所有3个主要问题都会发生，并显示子问题。子问题在模式窗口中打开。这些子问题中的一些与其他子问题相关，因此在模态窗口中具有链接以切换到相关的其他子问题模态窗口。

我已经针对同一主要问题部分中的所有子问题进行了处理，但是某些子问题在其他两个主要问题部分之一中具有相关的答案。（希望有人继续阅读此书。）

如何在模式窗口中获取链接以打开一个新的模式窗口，该窗口位于同一页面中，但在该页面的隐藏部分内？

我意识到这很难解释，所以我将尝试引导您解决问题，以便您自己了解我要达到的目标：

在上面打开链接以获取当前问题所在的位置
点击问题C
点击子问题C：2
在模态窗口中，单击“答案C：4”或“答案C：7”，这是正确的。如果单击“答案A：7”，则仅关闭模态，然后什么也没有发生。我如何才能将其转换为属于问题A子问题一部分的模态（甚至只是问题A的子问题集）？

道歉，造成混乱的解释。请随时询问我更多信息。

编辑1：询问更多详细信息，并发布一些代码。非常感谢：

有关模模的制作方法，请参见以下内容，共有23个模模，分为3个部分。模式页脚中的按钮目前无法正常工作。如果链接指向同一集合中的子问题，则可以正常工作，但如果指向另一个集合，则它会关闭模态，然后什么都不会发生：

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<ul class="nav nav-fill nav-pills">
<li class="nav-item">
<a class="nav-link subQSciCha button" data-target="#myModal15" data-toggle="modal">C:1. What are the fundamental particles and fields?</a>
</li>
</ul>
</div>

<div class="fade modal" id="myModal15" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button class="close" data-dismiss="modal" type="button">&times;</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<p>Stuff...</p>
</div>
</div>
<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" data-target="#myModal16" data-toggle="modal" type="button">Answer C:2.</button><button class="btn btn-default" data-dismiss="modal" data-target="#myModal18" data-toggle="modal" type="button">Answer C:4.</button><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>

现在可以使用JavaScript（这就是所有的JavaScript，其中一些与模式无关，但以防万一它妨碍了方式）：

// Hides the sub questions and switch menu on page load if no anchor link is used
// If anchor link is used, challenges will hide and selected question and menu will display
window.onload = function() {

// Retrieves URL # and splits into 2 IDs which are used to display relevant questions/menu
var $idNme = location.hash;
var $idNmeSplit = $idNme.split('/');
var $idQ = $idNmeSplit[0];
var $idM = "#" + $idNmeSplit[1];

if(!$idNme){
    hideAnswers()
    hideSubQuestions()
} else {
    hideAnswers()
    hideSubQuestions()
    $("#sciChallenges").children().hide();
    $($idQ).show();
    $($idM).show();
}
}

// Hides the sub questions and switch menu
function hideSubQuestions(){
$("#subQuestions").children().hide();
$("#switchMenu").children().hide();
}
// Shows the sub questions for the selected question and switch menu with a fade in set to 1 second
function showSubQuestions(i,m) {
hideAnswers();
$("#intro").hide();
$("#sciChallenges").children().hide();
$("#subQuestions").children().fadeIn(1000).hide();
$(i).show();
$("#switchMenu").children().fadeIn(1000).hide();
$(m).fadeIn(1000).show();
}
// Shows the 4 main questions when 'All Challenges' is selected
function showSciChallenges() {
hideSubQuestions();
hideAnswers();
$("#intro").fadeIn(1000).show();
$("#sciChallenges").children().fadeIn(1000).show();
}
// Hides the answers to all questions
function hideAnswers() {
$("#answersA, #answersB, #answersC").children().hide();
}
// Shows the answer to selected question
function showAnswers(a) {
$("#answersA, #answersB, #answersC").children().hide();
$(a).fadeIn(1000).show();
}

让我知道是否需要查看更多内容。

Answer 1

尝试将所有模式div直接移到您的身体标签之后。由于模态是隐藏的，直到您仍然调用它们为止，因此它们不必位于可能已隐藏的其他div中。

<body>
<div class="fade modal" id="myModal1" role="dialog" style="display: none;" aria-hidden="true"></div>
<div class="fade modal" id="myModal2" role="dialog" style="display: none;" aria-hidden="true"></div>
<div class="fade modal" id="myModal..." role="dialog" style="display: none;" aria-hidden="true"></div>

<div class="container">
**the rest of your content
</div>

</body>

然后，您可以从任何其他模式中调用任何模式：

<button class="btn btn-default" data-dismiss="modal" data-target="#myModal7" data-toggle="modal" type="button">Answer A:7.</button>

点击链接应关闭模式并激活JavaScript以在divs中隐藏的内容部分之间进行切换

1 个答案: