弹出式表单未出现在 bootstrap 网站中

Question

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

<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

modal-body 是 class，但您在脚本中将其视为 id。

你应该把class改成id，或者修改脚本。

Answer 2

将此 $("#modal-body").modal('show'); 更改为 $(".modal-body").modal('show');

Answer 3

两件事：

1) 从模态 html:

中删除 "hide" class

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

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

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

如图所示，这似乎对我有用 here。如果这不是您要寻找的效果，请告诉我。祝你好运！

弹出式表单未出现在 bootstrap 网站中

Pop-Up form not appearing in bootstrap website

javascript

jquery

popup

twitter-bootstrap