Javascript Open Window - Changed To Modal

I first asked a question on how to open elements in DOM, however I had problems with making the javascript realise which one was opening because on a specified page I had multiple

Solution 1:

You duplicated the content and the Id "myModal", Id must be unique.

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

Because you use boostrap, you do not need any javascript.

Solution 2:

The problem is that you have multiple DOM elements with the same id:

div id="myModal"

if you are using bootstrap 3 you should specify data-target for modals:

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

Solution 3:

What if the content is made dynamic and the div of myModal needs to change dynamically in perspective to how many modals are on that page? Is there a way of giving the href and id="myModal" a variable where it'll increment if more than 1 modal is used on a page?

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

Using expression engine as the CMS I was able to fix a variable from the plugin called 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> 

With the code above I was able to resolve the problem: If on a page there are more than 1 of these items they need to icrement :)