使用引导模式打开新窗口答案

【问题标题】：opening new window using bootstrap modal使用引导模式打开新窗口
【发布时间】：2015-03-07 09:47:44
【问题描述】：

我有这个注册表单，当点击提交按钮时 <form action="viewReg.php"> 将使用引导模式弹出。我在表单上输入的值将一起。我已经知道如何从输入字段中获取这些值。我只想使用模态viewReg.php弹出结果

我试过http://getbootstrap.com/2.3.2/javascript.html#modals 但它没有使用表单的外部链接指南。

编辑有两个页面..Registration.html和viewReg.php

我是编码新手。

<form action="viewRegistration.php" method="post" >

  <!-- Table -->
  <table class="table">
  <tr>
    <td>USN</td>
    <td><input type="text" name="usn" placeholder="USN #"></td>
  </tr>
  <tr>
    <td>First Name</td>
    <td><input type="text" name="firstname" placeholder="First Name" style="text-transform: capitalize;"></td>
</tr>
  <tr>
    <td>Last Name</td>
    <td ><input type="text" name="lastname" placeholder="Last Name" style="text-transform: capitalize;"></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" name="email" placeholder="Email Address"></td>
  </tr>
  <tr>
    <td>Birthday</td>
    <td><input type="text" id="datepicker" name="datepicker" placeholder="Your Birthday"></td>
  </tr>
  <tr>
    <td>Place of Birth</td>
    <td> 
        <select name="pob">
        <option value="Manila">Manila</option>
        </select> 
    </td>
  </tr>
  <tr>
    <td>Course</td>
    <td><select name="course">
        <option value="Bachelor of Science in Information Technology">BS in Information Technology</option>
        </select> 
    </td>
  </tr>
  </table>
</div>  
<input type="reset" value="Reset" class="btn btn-primary"> <input type="submit" value="Submit" class="btn btn-primary">
</form>

【问题讨论】：

我认为您的问题与正确使用引导模式几乎无关。您想要的（我猜）是在页面中获取 viewReg.php 的结果而无需重新加载，以便您可以通过 JavaScript 将其直接添加到您的页面内容中（例如在引导模式对话框中）。因此，您需要以一种或另一种方式使用 Ajax。
我知道如何获取 viewReg.php 的结果。我想要的是在单击提交按钮时打开一个新窗口（viewReg.php）。我只是希望它像引导模式。无论如何，我正在考虑使用 lightBox。
open a new window != bootstrap modal（或者你需要在打开新窗口后直接打开模态，这有点会扼杀它的感觉）......

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是一个关于如何在 bs3 modals 中使用表单的示例：

Live Demo

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Normal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">

                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>


            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                            Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

【讨论】：

我应该在哪里放置表单和 viewReg.php 的代码？我想要的是使用模态弹出viewReg.php ..基本上就像打开新窗口一样。通过 bs3 modal
还有一件事注册表是不同的页面。所以使用 .php 文件
你可以使用包含这种东西！！

【解决方案2】：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <h3>Modal Body</h3>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

会这样，但要根据你的课程调整

【讨论】：