javascript - 弹出表单未出现在 Bootstrap 网站中

Question

我编写了一个弹出表单的代码，用于在单击 Bootstrap 网站中的“编辑”链接时提交数据:代码是:

<script type="text/javascript">
      $(document).ready(function(){
      $("#modal-body").modal('show');
    });
</script>  
<div id="form-content" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                      <a class="close" data-dismiss="modal">×</a>
                      <h3>Send me a message</h3>
                    </div>
                    <div class="modal-body">
                      <form class="contact" name="contact">
                        <label class="label" for="name">Your Name</label><br>
                        <input type="text" name="name" class="input-xlarge"><br>
                        <label class="label" for="email">Your E-mail</label><br>
                        <input type="email" name="email" class="input-xlarge"><br>
                        <label class="label" for="message">Enter a Message</label><br>
                        <textarea name="message" class="input-xlarge"></textarea>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <input class="btn btn-success" type="submit" value="Send!" id="submit">
                      <a href="#" class="btn" data-dismiss="modal">Nah.</a>
                    </div>
                  </div>
                <div id="thanks"><p><a data-toggle="modal" href="#form-content">Edit!</a></p></div>   

但是弹出表单没有出现。哪里错了？

Answer 1

有两件事:

1) 从模态 html 中删除“隐藏”类:

<div id="form-content" class="modal fade in" style="display: none;">

2) 使用 jQuery 而不是模态主体来定位实际模态:

$(document).ready(function () {
    $("#form-content").modal('show');
});

这似乎对我有用，如图 here 。如果这不是您想要的效果，请告诉我。祝你好运!