使用 jQuery 打開僅 CSS 模型彈出窗口

Question

我無法使用 jquery 或 javascript 調用以下 HTML div，使用以下腳本：

 $("#open-modal").modal("toggle");
 $("#open-modal").modal("show"); 
 $("#open-modal").modal("hide");
 $("#open-modal").toggle();
 $("#open-modal").show();
 $("#open-modal").hide();

我可以使用按鈕打開彈出窗口。 這是 HTML 代碼

  <div class="container">
  <div class="interior">
    <a class="btn" href="#open-modal">👋CSS-Only Modal</a>
  </div>
</div>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#" title="Close" class="modal-close">Close</a>
    <h1>Success!</h1>
    <div>PoP up Me</div>
    </div>
</div>

完整代碼在JS fiddle

Answer 1

您沒有使用引導模式，因此您不能使用modal調用。

請參閱下面的引導模式示例

 $(function(){ $('.btn').on('click', function(){ $('#open-modal').modal('show'); }); })

 .modal-window { position: fixed; background-color: rgba(255, 255, 255, 0.25); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; &:target { visibility: visible; opacity: 1; pointer-events: auto; } &>div { width: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; background: #ffffff; } header { font-weight: bold; } h1 { font-size: 150%; margin: 0 0 15px; } } .modal-close { color: #aaa; line-height: 50px; font-size: 80%; position: absolute; right: 0; text-align: center; top: 0; width: 70px; text-decoration: none; &:hover { color: black; } } /* Demo Styles */ html, body { height: 100%; } body { font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; background-image: linear-gradient(to right,#7f53ac 0,#657ced 100%); color: black } a { color: inherit; } .container { display: grid; justify-content: center; align-items: center; height: 100vh; } .modal-window div:not(:last-of-type) { margin-bottom: 15px; } small { color: #aaa; } .btn { background-color: #fff; padding: 1em 1.5em; border-radius: 3px; text-decoration: none; i { padding-right: 0.3em; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <div class="interior"> <a class="btn" href="#">👋 Basic CSS-Only Modal</a> </div> </div> <div class="modal fade" id="open-modal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Voilà!</h4> </div> <div class="modal-body"> <p>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</p> <div><small>Check out</small></div> <a href="https://aminoeditor.com" target="_blank">👉 Amino: Live CSS Editor for Chrome</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>