Question

假设我的表单格式为id =＆＃34; form1＆＃34;：

<form id="form1">
   <input type="text">
</form>

我还会显示一个允许用户调出模式的按钮：

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
      Click here to zoom in!
</button>

挑战在于我希望我的模态显示相同的形式（form1），但到目前为止，我没有太多运气得到这个。以下是我的模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <h3>This is my header</h3>
  </div>
  <div class="modal-body">

<!-- I WANT TO ADD THE INPUT FORM THAT EXISTS OUTSIDE THE MODAL HERE -->      

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

这可能吗？如果是这样，怎么样？

Answer 1

如果表单和所有这些标记在同一页面上，那么将表单标签放在带有类modal-body的div中，如果仍然不起作用，则使用java-script显示模态。这是示例工作代码，

<button class="btn btn-primary btn-sm" data-toggle="modal" id="showModalPopup" data-target="#myModal">
            Click here to zoom in!
        </button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
                        <h4 class="modal-title">This is my header</h4>
                    </div>

                    <div class="modal-body">
                        <form id="form1">
                            <input type="text" />
                        </form> 

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function(){
       $('#showModalPopup').on('click', function(e) {
           e.preventDefault();         
           $('#myModal').modal('show'); 
       });
    });
    </script>

我希望它有所帮助。

使用Bootstrap在modal中创建现有元素

1 个答案: