如何添加第二个模态到我的html页面 [英] How do I add a 2nd modal to my html page

查看：90
本文介绍了如何添加第二个模态到我的html页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我没有在我上一篇文章中解释我的问题。所以我想添加第二个模式到我的html页面，所以如果你点击按钮1 它会打开模式1，如果你点击按钮2，它会打开模式2，但是按钮3按钮4按钮5和按钮6打开模式2。当我创建第二个模式并设置下面的JavaScript。它会继续打开两个按钮上的Modal 2，而不是按钮1上的模式1.



另外请注意，第一个按钮空闲的ID



另请注意，第二个按钮oneday的ID

HTML以下



按钮1 

 <！ -  service item  - >< div class =col-md-4 wow fadeInLeftdata-wow-duration =500ms> ; < div class =service-item> < div class =service-icon> < i class =fa fa-snowflake-o fa-2x>< / i> < / DIV> < div class =service-desc> < button id =free> < h3> 5天免费试用< / h3> < /按钮> < b>< p>因此，您可以免费体验动作，我们会给新用户5天的试用期，看看他们在购买前如何喜欢我们的机器人！< / p> < / B个< / DIV> < / div>< / div><！ -  end service item  - >


$ b

按钮2 

 <！ -  service item  -  - > 
< div class =col-md-4 wow fadeInUpdata-wow-duration =500msdata-wow-delay =500ms> 
< div class =service-item> 
< div class =service-icon> 
< i class =fa fa-clock-o fa-2x>< / i> 
< / div> 
 
< div class =service-desc> 
< button id =oneday> 
< h3> 1天< / h3> 
< / button> 
< b>< p> $ 0.74& nbsp;& nbsp; -24小时< / p> < / B个
< / div> 
< / div> 
< / div> 
 <！ - 结束服务项目 - >

这里的Modals



Modal1 

 <！ -  Modal1  - >< div id =myModal1class =modal> <！ - 模态内容 - > < div class =modal-content> < form name =getinfoonsubmit =return validateForm（）action =php / gmail.phpmethod =POST> < div class =form-style-8> < span class =close>& times;< / span> < label for =msg>电子邮件：< / label> < input type =emailid =mailname =email/> < / DIV> < DIV> < label for =msg>使用者名称：< / label> <峰; br> < input id =username =username> < / textarea的> < / DIV> < DIV> < label for =msg>密码：< / label> <峰; br> < input type =passwordid =passname =password> < / textarea的> < / DIV> < DIV> < label for =msg>确认密码：< / label> <峰; br> < input type =passwordid =passname =cpassword> < / textarea的> < / DIV> < DIV> < label for =msg> 3 Hashtags：< / label> <峰; br> < input id =tagsname =hashtags> < / textarea的> < / DIV> < DIV> < input id =submittype =submitname =submitvalue =submit> < / DIV> < /形式> < / div>< / div>

Modal2

<！ - Modal2内容 - >< div class =modal-content > < form name =getinfo2onsubmit =return validateForm（）action =php / gmail.phpmethod =POST> < div class =form-style-8> < span class =close>& times;< / span> < label for =msg>示例：< / label> < input type =emailid =e1name =email/> < / DIV> < DIV> < label for =msg>例子2：< / label> <峰; br> < input id =e2name =username> < / textarea的> < / DIV> < DIV> < label for =msg>示例3：< / label> <峰; br> < input type =passwordid =e3name =password> < / textarea的> < / DIV> < DIV> < label for =msg>例子4：< / label> <峰; br> < input type =passwordid =e4name =cpassword> < / textarea的> < / DIV> < DIV> < label for =msg>示例5：< / label> <峰; br> < input id =e5name =hashtags> < / textarea的> < / DIV> < DIV> < input id =submittype =submitname =submitvalue =submit> < / DIV> < / form>< / div>< / div>

p>所以我问我如何让modal1只与button1和modal2一起工作，以使用2,3,4,5和6的按钮，以后我会创建。

解决方案

你只需要一个模式 - 它只是一个DIV结构，没有任何魔法（唯一的 magic 它会出现/消失 - 并且bootstrap会这样做）。在需要时，从存储的地方抓取所需内容，并将其粘贴到模块的 .modal-body div，然后让bootstrap显示它。



以下是操作方法。
$ b （2）为每个按钮提供一个唯一的唯一标识符（ID），并为每个按钮指定一个具有唯一标识符的标识符（ 数字你可以隔离，并给每个隐藏的模态内容div一个名字以相同的数字结尾。例如，按钮＃btn_2将与隐藏div＃mdl2匹配，其中包含您想要按钮＃btn_2的内容。 （3）使用javascript（你正在使用Bootstrap，它使用jQuery，所以为什么不使用jQuery）来交换正确的内容。当你点击按钮时，隔离数字2（ var buttNum = this.id.split（'_'）[1]; - 试一试）并用它来抓取从＃mdl2 div（ var content = $（'＃mdl'+ buttNum）.html（） ）



（4）让Bootstrap负责打开/关闭模态。



示例：

>

$（'[id ^ = btn _]'）。click（function（）{ var buttNum = this.id.split（'_'）[1]; // alert（buttNum）; var content = $（'＃mdl'+ buttNum）.html（）; $（'＃myModal1 .modal-body '）.html（content）;}）;

＃ mdl1，＃mdl2，＃mdl3 {display：none;} / *隐藏包含模态内容的div * / 

 <！DOCTYPE html>< htm l lang =en>< head> < title>引导程序示例< / title> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< / head>< body>< div class = 容器 > < h3>重新使用相同的模态< / h3> <！ - 用按钮触发模式 - > < button id =btn_1type =buttonclass =btn btn-info btn-lgdata-toggle =modaldata-target =＃myModal1> Open Modal One< / button> < button id =btn_2type =buttonclass =btn btn-info btn-lgdata-toggle =modaldata-target =＃myModal1> Open Modal Two< / button> < button id =btn_3type =buttonclass =btn btn-info btn-lgdata-toggle =modaldata-target =＃myModal1> Ogden Nash Poem< / button> <！ - 可重复使用的模式 - > < div class =modal fadeid =myModal1role =dialog> < div class =modal-dialog modal-md> < div class =modal-content> < div class =modal-body> < / DIV> < / DIV> < / DIV> < / DIV>< / DIV> <！ - 将模态内容粘贴在页面底部的隐藏div中 - > < div id =mdl1> < div>点击外部模式关闭模式< / div> < form name =getinfoonsubmit =return validateForm（）action =php / gmail.phpmethod =POST> < div class =form-style-8> < span class =close>& times;< / span> < label for =msg>电子邮件：< / label> < input type =emailid =mailname =email/> < / DIV> < DIV> < label for =msg>使用者名称：< / label> <峰; br> < input id =username =username> < / DIV> < DIV> < label for =msg>密码：< / label> <峰; br> < input type =passwordid =passname =password> < / DIV> < DIV> < label for =msg>确认密码：< / label> <峰; br> < input type =passwordid =passname =cpassword> < / DIV> < DIV> < label for =msg> 3 Hashtags：< / label> <峰; br> < input id =tagsname =hashtags> < / DIV> < DIV> < input id =submittype =submitname =submitvalue =submit> < / DIV> < /形式> < / DIV> < div id =mdl2> < div>点击外部模式关闭模式< / div> < h1>动物的图像< / h1> < img src =http://placeimg.com/200/200/animals/> < / div><！ - ＃mdl2  - > < div id =mdl3> < div>点击外部模式关闭模式< / div> < h1> Ogden Nash的诗< / h1> < div style =font-size：1.4rem;> < div>时钟之手达到高点< / div> < div>在老城中心酒店;< / div> < div>我的名字没有名字，但其肮脏的名声< / div> < div>在地狱中进行桌面讨论< / div> < div>我没有名字，但地狱的火焰< / div> < div>展示大厅花哨，< / div> < div>金光闪闪的纽约时报广场< / div> < div>为教区的少女。< / div> < div>旋转门扫过肮脏的地板< / div> < div>像crinoline怪诞一样，< / div> < div>来自古老贫民窟的低贱< / div> < div> Crept偷偷走过办公桌。< / div> < div>他的脚步踏入升降机< / div> < div>由于护套中的刀子滑动，< / div> < div>隐身并迅速进入电梯< / div> < div>作为吸血鬼进入地下室。< / div> < / DIV> < / div><！ - ＃mdl3  - >< / body>< / html>

p>

I didn't explain my problem in my last post.

So I want to add a second modal to my html page so if you click on "Button 1" it would open "Modal 1" and if you click "button 2" it will open "Modal 2" however "button 3" "button 4" "button 5" and "button 6" to open "modal 2". When i created the second modal and set the javascript below. It will keep opening Modal 2 on both buttons and not modal 1 on button 1.

Also note, the ID of the first button "free"

Also note, the ID of the second button "oneday"

<script>
// Get the modal1
var modal = document.getElementById('myModal1');

// Get the button that opens the modal
var btn = document.getElementById("free");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<script>
// Get the modal2
var modal = document.getElementById('myModal2');

// Get the button that opens the modal
var btn = document.getElementById("oneday");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Both buttons keep opening "Modal2" when the button 1 is set for "Modal1" HTML Below

Button 1 

<!-- service item -->
<div class="col-md-4 wow fadeInLeft" data-wow-duration="500ms">
  <div class="service-item">
    <div class="service-icon">
      <i class="fa fa-snowflake-o  fa-2x"></i>
    </div>

    <div class="service-desc">
      <button id="free">
        <h3>5 Day Free Trial</h3> 
      </button>
      <b><p>So you can get a taste of the action for free, we will give new users a 5 day trial to see how they like our bot before they buy!</p> </b>
    </div>
  </div>
</div>
<!-- end service item -->

Button 2

<!-- service item -->
<div class="col-md-4 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="500ms">
  <div class="service-item">
    <div class="service-icon">
      <i class="fa fa-clock-o fa-2x"></i>
    </div>

    <div class="service-desc">
      <button id="oneday">
        <h3>1 Day</h3> 
      </button>
      <b><p>$0.74  &nbsp;&nbsp;-24 Hours </p> </b>
    </div>
  </div>
</div>
<!-- end service item -->

And the Modals are here

Modal1

<!-- Modal1 -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      <div class="form-style-8">
        <span class="close">&times;</span>
        <label for="msg">E-mail:</label>
        <input type="email" id="mail" name="email" />
      </div>
      <div>
        <label for="msg">Username:</label>
        <br>
        <input id="user" name="username">
        </textarea>
      </div>
      <div>
        <label for="msg">Password:</label>
        <br>
        <input type="password" id="pass" name="password">
        </textarea>
      </div>
      <div>
        <label for="msg">Confirm Password:</label>
        <br>
        <input type="password" id="pass" name="cpassword">
        </textarea>
      </div>
      <div>
        <label for="msg">3 Hashtags:</label>
        <br>
        <input id="tags" name="hashtags">
        </textarea>
      </div>
      <div>
        <input id="submit" type="submit" name="submit" value="submit">
      </div>
    </form>
  </div>
</div>

Modal2 

<!-- Modal2 content -->
<div class="modal-content">

  <form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
    <div class="form-style-8">
      <span class="close">&times;</span>
      <label for="msg">Example:</label>
      <input type="email" id="e1" name="email" />
    </div>
    <div>
      <label for="msg">Example2:</label>
      <br>
      <input id="e2" name="username">
      </textarea>
    </div>
    <div>
      <label for="msg">Example3:</label>
      <br>
      <input type="password" id="e3" name="password">
      </textarea>
    </div>
    <div>
      <label for="msg">Example4:</label>
      <br>
      <input type="password" id="e4" name="cpassword">
      </textarea>
    </div>
    <div>
      <label for="msg">Example5:</label>
      <br>
      <input id="e5" name="hashtags">
      </textarea>
    </div>
    <div>
      <input id="submit" type="submit" name="submit" value="submit">
    </div>
  </form>
</div>
</div>

So i'm asking how do I get modal1 to work only with button1 and modal2 to work with buttons 2,3,4,5 and 6 that i will create later.

解决方案

You only need one modal -- it's just a DIV structure, nothing magic (the only magic is making it appear/disappear - and bootstrap does that trick). When needed, grab the desired content from where you have it stored, stick it into the modal's .modal-body div, and let bootstrap display it.

Here's how.

(1) Store the content for each modal in hidden DIVs elsewhere in the document.

(2) Give each button an ID with a unique number you can isolate, and give each "hidden modal content div" a name ending with the same number. For example, button "#btn_2" will match with hidden div "#mdl2", which contains the content you want for button #btn_2.

(3) Use javascript (you are using Bootstrap, which uses jQuery, so why not use jQuery) to swap in the correct content. When you click the button, isolate the number 2 (var buttNum = this.id.split('_')[1]; - try it) and use that to grab the html from the #mdl2 div (var content = $('#mdl'+buttNum).html())

(4) Let Bootstrap take care of opening/closing the modal.

Example:

$('[id^=btn_]').click(function(){
  var buttNum = this.id.split('_')[1];
  //alert(buttNum);
  var content = $('#mdl'+buttNum).html();
  $('#myModal1 .modal-body').html(content);
});

#mdl1, #mdl2, #mdl3{display:none;} /*  Hide the divs containing modal content */

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Re-Using the Same Modal</h3>
  <!-- Trigger the modal with a button -->
  <button id="btn_1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal One</button>
  <button id="btn_2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal Two</button>
  <button id="btn_3" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ogden Nash Poem</button>

  <!-- Re-Usable Modal -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- Stick your modal content in hidden divs at bottom of the page -->
  <div id="mdl1">
    <div>Click outside modal to close modal</div>
    <form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      <div class="form-style-8">
        <span class="close">&times;</span>
        <label for="msg">E-mail:</label>
        <input type="email" id="mail" name="email" />
      </div>
      <div>
        <label for="msg">Username:</label>
        <br>
        <input id="user" name="username">

      </div>
      <div>
        <label for="msg">Password:</label>
        <br>
        <input type="password" id="pass" name="password">
      </div>
      <div>
        <label for="msg">Confirm Password:</label>
        <br>
        <input type="password" id="pass" name="cpassword">
      </div>
      <div>
        <label for="msg">3 Hashtags:</label>
        <br>
        <input id="tags" name="hashtags">   
      </div>
      <div>
        <input id="submit" type="submit" name="submit" value="submit">
      </div>
    </form>
  </div>
  <div id="mdl2">
      <div>Click outside modal to close modal</div>
      <h1>Image of an Animal</h1>
      <img src="http://placeimg.com/200/200/animals" />
  </div><!-- #mdl2 -->
  <div id="mdl3">
      <div>Click outside modal to close modal</div>
      <h1>Poem by Ogden Nash</h1>
      <div style="font-size:1.4rem;">
		<div>The hands of the clock were reaching high</div>
		<div>In an old midtown hotel;</div>
		<div>I name no name, but its sordid fame</div>
		<div>Is table talk in hell.</div>
		<div>I name no name, but hell's own flame</div>
		<div>Illumes the lobby garish,</div>
		<div>A gilded snare just off Times Square</div>
		<div>For the maidens of the parish.</div>

		<div>The revolving door swept the grimy floor</div>
		<div>Like a crinoline grotesque,</div>
		<div>And a lowly bum from an ancient slum</div>
		<div>Crept furtively past the desk.</div>
		<div>His footsteps sift into the lift</div>
		<div>As a knife in the sheath is slipped,</div>
		<div>Stealthy and swift into the lift</div>
		<div>As a vampire into a crypt.</div>
      </div>
  </div><!-- #mdl3 -->
</body>
</html>

这篇关于如何添加第二个模态到我的html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆