Question

我的页面上有一个按钮，我希望它在点击时显示一个弹出框但是我尝试了一些东西并且它不起作用

我想让该按钮在点击时显示消息。

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i>  Find out more</button>

    <div id="moreinfo" class="modal fade" role="dialog">

        <div class="modal dialog">

            <div class="modal-content">

                <div class="modal-header">
                fds
                </div><!--end of modal header-->

                <div class="modal-content">
                fds
                </div><!--end of modal content-->

                <div class="modal-footer">
                fds
                </div><!--end of modal footer-->

            </div><!--end of modal content-->

        </div><!--end of modal dialog-->

    </div><!--en dof more info div-->

使用此代码，我得到的是当单击按钮时屏幕淡出但它没有显示任何内容。

我也有以下内容

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

您的代码中有2个拼写错误：

<div class="modal dialog">

modal dialog之间不应有任何空格。它的一个班级modal-dialog。
modal-body内缺少modal。而是使用了modal-content两次。它应该具有Bootstrap's Documentation的结构。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i>  Find out more</button>

    <div id="moreinfo" class="modal fade" role="dialog">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">
                fds
                </div><!--end of modal header-->

                <div class="modal-body">
                fds
                </div><!--end of modal body-->

                <div class="modal-footer">
                fds
                </div><!--end of modal footer-->

            </div><!--end of modal content-->

        </div><!--end of modal dialog-->

    </div><!--en dof more info div-->

Answer 2

你没有把连字符放在模态和dilaog中，你写了

<div class="modal dialog">

但你必须这样写

<div class="modal-dialog">

仅仅因为连字符（ - ）发生了所有问题

Answer 3

你需要Bootstrap popover吗？如果是的话 - here是一个很好的简单示例和文档，完全代表你的针。

或者你需要一个可以调用模态窗口的按钮？如果是的话 - here是很好的例子和文档，也完全代表你的针。

Answer 4

您的代码是正确的唯一问题是在这一行。

你必须这样写

所有模态代码都在这里，你现在只需复制粘贴它并节省你的时间:)欢呼

<div id="moreinfo" class="modal fade" role="dialog">
  <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
          </div><!--end of modal header-->
          <div class="modal-body">
                  <p>One fine body&hellip;</p>
          </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><!--end of modal footer-->
    </div><!--end of modal content-->
  </div><!--end of modal dialog-->
</div><!--en dof more info div-->

Bootstrap按钮弹出消息

4 个答案: