Javascript 使用jQuery更改模式内容_Javascript_Jquery_Bootstrap Modal

Javascript 使用jQuery更改模式内容

javascript jquery

Javascript 使用jQuery更改模式内容,javascript,jquery,bootstrap-modal,Javascript,Jquery,Bootstrap Modal,我正在使用twitter引导的模式来制作一个弹出表单下面是显示模态形式的代码第一模态形式 <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-dialog1">  <div class="modal-container"> <div

我正在使用twitter引导的模式来制作一个弹出表单

下面是显示模态形式的代码

第一模态形式

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-dialog1">

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

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Student's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">First Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="First Name">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Last Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Last Name">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">State</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="State">
                      </div>
                    </div>

                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Next of Kin</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Next of Kin">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Class</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Class">
                      </div>
                    </div>

                  </div>

                  <div class="col-md-12 text-right">
                    <button id="cancel-btn-modal">Cancel</button>
                    <button id="continue-btn-modal">Continue</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>

<!-- Modal -->
  <div class="modal fade" id="Add-Student-Modal" role="dialog">
    <div class="modal-dialog modal-dialog1">

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

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Guidiant's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">
                  <div class="modal-form">
                      <label for="guidiantName">Guidiance name</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Guidiance name">
                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Occupation</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Occupation">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Email Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Email Address">
                  </div>

                  <div class="col-md-12 text-right">
                    <button id="preview-btn-modal">Preview</button>
                    <button id="save-btn-modal">Save</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>


&时代；
模态头
学生信息
名字

姓氏

地址

电话号码

状态

近亲

类别

取消
继续

第二模态形式

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-dialog1">

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

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Student's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">First Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="First Name">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Last Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Last Name">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">State</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="State">
                      </div>
                    </div>

                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Next of Kin</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Next of Kin">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Class</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Class">
                      </div>
                    </div>

                  </div>

                  <div class="col-md-12 text-right">
                    <button id="cancel-btn-modal">Cancel</button>
                    <button id="continue-btn-modal">Continue</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>

<!-- Modal -->
  <div class="modal fade" id="Add-Student-Modal" role="dialog">
    <div class="modal-dialog modal-dialog1">

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

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Guidiant's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">
                  <div class="modal-form">
                      <label for="guidiantName">Guidiance name</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Guidiance name">
                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Occupation</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Occupation">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Email Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Email Address">
                  </div>

                  <div class="col-md-12 text-right">
                    <button id="preview-btn-modal">Preview</button>
                    <button id="save-btn-modal">Save</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>


&时代；
模态头
桂典信息
指南名称

地址

电话号码

职业

电子邮件地址

预览
拯救

上述代码生成标题“Continue”。下面有两个按钮取消并继续。我试图使这两个按钮动态。我在这里要做的是，当单击“取消”时，模式将关闭。单击“继续”时，主体将动态更改为其他模式内容

我相信javascript/jQuery涉及到了这一点，但我想不出任何方法来解决这个问题。请开导我。非常感谢

衰落示例

$（“#modal2按钮”）。单击（函数（）{
$（'#modal1'）.fadeOut（）；
setTimeout（函数（）{
$（'#modal2'）.fadeIn（）；
}, 400)
});
$（“#关闭按钮”）。单击（函数（）{
setTimeout（函数（）{
$（'#modal1'）.fadeIn（）；
$（'#modal2'）.fadeOut（）；
}, 1000)
});
。隐藏我{
显示：无；
}
.给我看看{
显示：块；
}

点击我
模态头
&时代；
这是模态1
第二模态的内容
接近
继续
首先，两个模态都有相同的id，这将导致意外行为。为了回答这个问题，你可以调用jQuery函数来切换两个模态的内容，基本上使用第二个模态作为“隐藏的html容器”是的，谢谢你刚刚编辑了它。我想要一个演示。对不起，我现在正在打电话；您应该搜索jQuery.append（）方法的文档，并记住您要做的是将第一个模态的主体内容存储在临时变量中，清空它，将第二个模态的主体内容附加到第一个，清空第二个模态的主体并将临时变量附加到它。您不一定需要将第二个主体保持在实际的模态中，它可能只是一个隐藏的div标记。哦，不要忘记单击“继续”按钮上的“preventDefault”方法，否则您的模式将关闭。祝你好运：）谢谢，有没有办法让我在其他内容中淡出淡出