Question

我首先问了一个关于如何在DOM中打开元素的问题，但是我遇到了让javascript意识到哪一个是打开的问题，因为在指定的页面上我有多个元素在点击时必须在DOM中打开。这个问题解决了，我得到了它的工作。这是下面的问题。

然而，我对这一持续的冒险有了新的篇章，

我需要使用bootstrap模态功能创建此函数，

<span class="show"><a href="#myModal" role="button" data-toggle="modal">Show<div class="glyphicons white new_window_alt"></div></a></span>
    <div class="show-dialog">
        Content 1 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 1 
    </div>
</div> 

<span class="show"><a href="#myModal" role="button" data-toggle="modal">Show<div class="glyphicons white new_window_alt"></div></a></span>
    <div class="show-dialog">
        Content 2 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 2
    </div>
</div>

此代码工作正常并打开模式，但只打开内容1，例如，如果我点击第二个节目'内容2'，它仍然显示'内容1'。

如何使用javascript让模态理解打开哪一个？

<script type="text/javascript">
    $(".Show a").click(function () {
        var html = $(this).parent().next("div.show-dialog").html();
        var my_window = window.open('','#myModal','height=455,width=750');
        $(my_window.document).find("body").html(html);
    }); 
</script>

任何帮助都将非常感激，并且了解javascript如何工作将有助于我的知识：）

Answer 1

问题是您有多个具有相同ID的DOM元素：

div id="myModal"

如果您使用的是bootstrap 3，则应为模态指定data-target：

<span class="show"><a href="#myModal1" role="button" data-toggle="modal" data-target="#myModal1">Show<div class="glyphicons white new_window_alt"></div></a></span>        
    <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 1 
    </div>
</div> 

<span class="show"><a href="#myModal2" role="button" data-toggle="modal" data-target="#myModal2">Show<div class="glyphicons white new_window_alt"></div></a></span>        
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 2
    </div>
</div>

Answer 2

您复制了内容和ID“myModal”，Id必须是唯一的。

<span class="show"><a href="#myModal" role="button" data-toggle="modal">Show<div class="glyphicons white new_window_alt"></div></a></span>
    <div class="show-dialog">
        Content 1 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 1 
    </div>
</div> 

<span class="show"><a href="#myModal2" role="button" data-toggle="modal">Show<div class="glyphicons white new_window_alt"></div></a></span>
    <div class="show-dialog">
        Content 2 
    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        Content 2
    </div>
</div>

因为你使用了boostrap，所以你不需要任何javascript。

Answer 3

如果内容是动态的，并且myModal的div需要动态地更改为该页面上有多少个模态，该怎么办？有没有办法给href和id =“myModal”一个变量，如果在页面上使用多于1个模态，它会增加？

<span class="{box-style}"><a href="#myModal" role="button" data-toggle="modal">{box-style}<div class="glyphicons white new_window_alt"></div></a></span>
        <div class="show-dialog">
        {activity-content}
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                {activity-content}
            </div>
        </div>

使用表达式引擎作为CMS我能够从插件修复一个名为matrix的变量 - {row_count}

<span class="{box-style}"><a href="#myModal{row_count}" role="button" data-toggle="modal">{box-style}<div class="glyphicons white new_window_alt"></div></a></span>
<div class="show-dialog">
    {activity-content}
    <div id="myModal{row_count}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        {activity-content}
    </div>
</div>

使用上面的代码，我能够解决问题：如果在页面上有超过1个这些项目，他们需要进行icrement：）

Javascript打开窗口 - 更改为模态

3 个答案: