Javascript打开窗口 - 更改为模态

Question

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

Javascript打开窗口

然而，我对这个正在进行的冒险有了新的篇章，

我需要创建此函数，但具有引导模式功能，

<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 :)