javascript - 如何将第二个模式添加到我的 html 页面

标签 javascript jquery html

我没有在上一篇文章中解释我的问题。

所以我想在我的 html 页面中添加第二个模态，这样如果您单击“按钮 1”，它将打开“模态 1”，如果您单击“按钮 2”，它将打开“模态 2”，但是“按钮 3” “按钮4”“按钮5”和“按钮6”打开“模态2”。当我创建第二个模态并设置下面的 javascript 时。它将继续在两个按钮上打开模态 2，而不是在按钮 1 上打开模态 1。

另请注意，第一个按钮“free”的 ID

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

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

当按钮 1 设置为“Modal1”时，两个按钮都会保持打开“Modal2” HTML 下面

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

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

模态框在这里

模态1

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

模态2 

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

所以我问如何让 modal1 仅与 button1 一起使用，而 modal2 与我稍后将创建的按钮 2、3、4、5 和 6 一起使用。

最佳答案

您不需要编写 JavaScript 来隐藏或显示模式，请在按钮标记中使用正确的数据目标和数据切换，如下所示， Bootstrap 将自动完成其余的工作。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Large Modal</button>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Large Modal</button>

设置data-toggle="modal"和data-target='<your-modal-id>'如上所示在按钮标签内。

要显示两个按钮的两个模态，只需在 data-target='<your-modal-id>' 中添加新模态的 id新按钮中的属性。

现在创建多个模态并为每个模态赋予不同的 <your_modal_id> 

  <div class="modal fade" id="<your_modal_id>" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">

            YOUR MODAL HTML CODE

        </div>
    </div>
  </div>

更新:添加关闭按钮以通过 Bootstrap 关闭模态框

替换<span class="close">&times;</span>在你的模态中使用

<button type="button" class="close" data-dismiss="modal">&times;</button>

单击模态上的关闭按钮时，它将自动关闭模态。

这是如何使用两个模态的示例

<!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">
  <h2>Large Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Large Modal</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Large Modal</button>

  <!-- Modal 1 -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          
    		<form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      		<div class="form-style-8">
        		<button type="button" class="close" data-dismiss="modal">&times;</button>
        		<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>
    </div>
  </div>
</div>

 <!-- Modal 2-->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
           <form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
    <div class="form-style-8">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <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">
    </div>
    <div>
      <label for="msg">Example3:</label>
      <br>
      <input type="password" id="e3" name="password">
    </div>
    <div>
      <label for="msg">Example4:</label>
      <br>
      <input type="password" id="e4" name="cpassword">
    </div>
    <div>
      <label for="msg">Example5:</label>
      <br>
      <input id="e5" name="hashtags">
    </div>
    <div>
      <input id="submit" type="submit" name="submit" value="submit">
    </div>
  </form>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

关于javascript - 如何将第二个模式添加到我的 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41411784/

上一篇：javascript - 默认选择的选项在 angularjs 中不起作用

下一篇：javascript - 拖动事件仅触发一次

相关文章：

javascript - 登录表单的输入验证是否过大？开销 + "too much javascript"问题

javascript - 列表中的列表后加法和减法按钮将不起作用(JavaScript)

html - 按钮与 div 不对齐

javascript - 在日历应用程序中查找从哪里开始计数

javascript - 无法让 Array.indexOf 方法在 Javascript 中工作

javascript - 这个 Prototype 到 JQuery 的端口是否正确？

html - 如何在调整浏览器大小时防止 UI 元素相互重叠？

javascript - 在 JavaScript 中为对象中的键插入数组格式的值

jquery - 如何从元素上解除焦点事件的绑定(bind)

php - 由 Ajax 改变的大整数

©2024 IT工具网  联系我们