Javascript Open Window - Changed to Modal

Question

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 elements that had to open in DOM when clicked. This problem was resolved and I got it working. This was the question below.

Javascript Open Window

However I have a new chapter to this ongoing adventure,

I need to create this function but with the bootstrap modal functionality,

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

This code works fine and opens a modal but only opens Content 1 so for example if I click the second show 'Content 2' it still shows 'Content 1'.

How can I use javascript to make the modal understand which one to open?

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

Any help would be greatly appreciated and an insight into how the javascript works would help my knowleadge :)

Answer 1

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> 

Answer 2

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.

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