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.

<spanclass="show"><ahref="#myModal"role="button"data-toggle="modal">Show<divclass="glyphicons white new_window_alt"></div></a></span><divclass="show-dialog">
        Content 1 
    <divid="myModal"class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
        Content 1 
    </div></div><spanclass="show"><ahref="#myModal2"role="button"data-toggle="modal">Show<divclass="glyphicons white new_window_alt"></div></a></span><divclass="show-dialog">
        Content 2 
    <divid="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:

<spanclass="show"><ahref="#myModal1"role="button"data-toggle="modal"data-target="#myModal1">Show<divclass="glyphicons white new_window_alt"></div></a></span><divid="myModal1"class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
        Content 1 
    </div></div><spanclass="show"><ahref="#myModal2"role="button"data-toggle="modal"data-target="#myModal2">Show<divclass="glyphicons white new_window_alt"></div></a></span><divid="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?

<spanclass="{box-style}"><ahref="#myModal"role="button"data-toggle="modal">{box-style}<divclass="glyphicons white new_window_alt"></div></a></span><divclass="show-dialog">
        {activity-content}
            <divid="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}

<spanclass="{box-style}"><ahref="#myModal{row_count}"role="button"data-toggle="modal">{box-style}<divclass="glyphicons white new_window_alt"></div></a></span><divclass="show-dialog">
    {activity-content}
    <divid="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 :)