Question

尝试在块中使用Bootstrap 4模式时，无法正确显示。它有点显示模态，但它仍处于“淡入”模式，然后你无法关闭模态 - 退出的唯一方法是刷新浏览器。

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 confrm-cart-box">
                            <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
                            <h3>order confirmation</h3>
                            <br>
                            <br>
                            <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
                            <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
                            <p>We have emailed you the order details for your convenience.</p>
                            <p>If you have any queries please contact us.</p>
                            <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Answer 1

您只需添加关闭按钮即可。通过此代码<!DOCTYPE html> <html> <head> <title>Happening.</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="head"> <h1>Happening.</h1> <h4>Your Name</h4> </div> <div class="col"> <h1>College image in the backgroud</h1> </div> <div class="sidebar"> <ul> <li> <h1>#Trending</h1> </li> <li><a href="#">Trending 1</a></li> <li><a href="#">Trending 2</a></li> <li><a href="#">Trending 3</a></li> <li><a href="#">Trending 4</a></li> <li><a href="#">Trending 5</a></li> <li><a href="#">Trending 6</a></li> <li><a href="#">Trending 7</a></li> <li><a href="#">Trending 8</a></li> <li><a href="#">Trending 9</a></li> <li><a href="#">Trending 10</a></li> <li><a href="#">Trending 11</a></li> </ul> </div> <div class="advert"> <h3>This is the place for adverts</h3> </div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Events</a></li> <li><a href="#">Hiring</a></li> <li><a href="#">Interships</a></li> <li><a href="#">Collegues</a></li> </ul> </div> <div class="feed"> <div class="wrapper"> <div class="post"> <img src="tony-webster-97532-unsplash.jpg" height="50" width="50"> <h4>Placement Officer ✔</h4> <p>Some message from the authority</p> </div> </div> </div> </body> </html>

之后

<div class='modal-content'>

试试这段代码，

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
</button>

这是小提琴，

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

我希望这会对你有所帮助。

Answer 2

将此CSS添加到标签中的文件中

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

对我有用！

Bootstrap 4模式无法在移动设备上运行 - 无法关闭模式或正确查看模式

2 个答案: