Javascript打开窗口 - 更改为模态 [英] Javascript Open Window - Changed to Modal

问题描述

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

a>

然而，我对这次冒险有了新的一章，我需要创建这个功能，但使用引导模式功能，

 < span class =show>< a href =＃myModal角色=buttondata-toggle =modal>显示< div class =glyphicons white new_window_alt>< / div>< / a>< / span> 
< div class =show-dialog> 
 Content 1 
 
内容1 
< / div> 
< / div> 
 
< span class =show>< a href =＃myModalrole =buttondata-toggle =modal>显示< div class =glyphicons white new_window_alt >< / DIV>< / A>< /跨度> 
< div class =show-dialog> 
 Content 2 
 
内容2 
< / div> 
< / div> 
  

这段代码可以正常工作并打开一个模式，但仅打开Content 1，例如，如果我单击第二个显示内容2它仍然显示内容1。

 <$> 
如何使用JavaScript让模态知道哪一个可以打开？ c $ c>< 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的工作方式将有助于我的知识：）

解决方案

如果内容是动态的并且myModal的div需要动态地改变该页面上有多少个模式？有没有一种方法可以让href和id =myModal成为一个变量，如果页面上使用了超过1个模式，它将会增加？

 < span class ={box-style}>< a href =＃myModalrole =buttondata-toggle =modal> {box-style}< div class =glyphicons white new_window_alt>< / div>< / a>< / span> 
< div class =show-dialog> 
 {activity-content} 
 
 {activity-content} 
< / div> 
< / div> 
  

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

 < span class ={box-style}>< a href =＃myModal {row_count} style =buttondata-toggle =modal> {box-style}< div class =glyphicons white new_window_alt>< / div>< / a>< / span> 
< div class =show-dialog> 
 {activity-content} 
 
 {activity-content} 
< / div> 
< / div> 
  

通过上面的代码，我能够解决问题：如果在页面上有多个这些物品需要加热：）

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

解决方案

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

这篇关于Javascript打开窗口 - 更改为模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！