引导模式对话框未出现

bootstrap modal dialog box not appearing

本文关键字：对话框 模式      更新时间：2023-09-26

我有一个模态对话框，应该显示，代码如下:

        <span style="vertical-align:top;"><a href="#myModal" role="button" class="btn btn-small btn-red" data-toggle="modal"> Delete League </a></span>
<!-- start of modal dialog box -->
<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <p>Ut nunc libero, sodales venenatis gravida nec, posuere quis ante.
      Phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis.
      </p>
    <p>Quisque lacus mi, gravida vel facilisis ac, malesuada vel augue.
      In ac leo eget tellus aliquet aliquam. Nam faucibus urna ac justo fringilla eu
      sollicitudin quam pretium. Proin pellentesque adipiscing sapien, non dignissim
      massa porttitor dictum. Integer tempor aliquam arcu, eget vehicula ipsum auctor at.</p>
  </div>
  <div class="modal-footer" data-dismiss="modal">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-green">Save changes</a>
  </div>
</div>
<%-- end of modal dialog box --%>

代码简单什么都不做，点击时什么都不发生，看了很多在网上的例子，他们都出现相同的。我有一个包裹。配置文件，这似乎包括链接到bootstrap。所有其余的网站考虑bootstrap我想说的是工作得很好，所以我相信链接在那里。包文件看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="bootstrap" version="3.3.1" targetFramework="net45" />
  <package id="jQuery" version="2.1.3" targetFramework="net35" />
</packages>

我猜我一定是错过了一个链接到某个地方，除非错误是与我的代码，任何一个任何建议…

你的模态是工作的，但你需要从外部div中删除'hide'类。此外，为了有正确的视觉方面，你需要在外部一个具有类'modal-dialog'和分别'modal-content'之后立即添加两个包装器div。请看下面的改编代码:

<!-- start of modal dialog box -->
<div class="modal fade" id="myModal">
    <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>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                <p>
                    Ut nunc libero, sodales venenatis gravida nec, posuere quis ante.
                    Phasellus lobortis molestie felis, vitae sagittis ipsum vehicula lobortis.
                </p>
                <p>
                    Quisque lacus mi, gravida vel facilisis ac, malesuada vel augue.
                    In ac leo eget tellus aliquet aliquam. Nam faucibus urna ac justo fringilla eu
                    sollicitudin quam pretium. Proin pellentesque adipiscing sapien, non dignissim
                    massa porttitor dictum. Integer tempor aliquam arcu, eget vehicula ipsum auctor at.
                </p>
            </div>
            <div class="modal-footer" data-dismiss="modal">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-green">Save changes</a>
            </div>
        </div>
    </div>
</div>
<!-- end of modal dialog box -->

要显示模态，可以使用:

$('#myModal').modal();
$('#myModal').modal('show');

相关文章：