Question

这是我的模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">text</h4>
        </div>
        <div class="modal-body">
            <p>Done!</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
        </div>
    </div>
</div>

这是我的链接：

<a class="btn btn-success" href="http://example.com" data-toggle="modal" data-target="#myModal">Text</a>

当我点击按钮时，模态正在激活，但只是屏幕变暗，我看不到任何内容。

你能帮我解决一下我做错了吗？

Answer 1

首先你需要show按钮，然后是模块代码：

       <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    </head>
    <body>
    <a class="btn btn-success" href="http://example.com" data-toggle="modal" data-target="#myModal">Test</a>



    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">text</h4>
            </div>
            <div class="modal-body">
                <p>Done!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</body>
</html>

模态显示但无法看到内容

1 个答案: