如果模型彈出窗口中沒有可用數據，如何自動關閉引導模型彈出窗口
[英]How to close bootstrap model popup automatically if not available data in model popup
問題描述
在這里我使用引導模型，在那個模型中我有一些引導卡，但是如果我點擊關閉按鈕，每張卡都有一個關閉按鈕，當模型彈出窗口只有一張卡時，卡將隱藏/從引導模型彈出窗口中刪除，如果我現在也想關閉最后一張卡，這次我也想自動關閉模型彈出窗口。 但我無法實現它。 任何人都可以請幫幫我。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .modal-body{ height: 70vh; overflow-y: auto; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 1</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2 ">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 2</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 3</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 4</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.clscurrent').on('click', function() { $(this).closest('.removeit').remove(); }); }); </script> </body> </html>
2 個解決方案
解決方案1
0 2022-06-16 06:18:52
嘗試這個 ：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .modal-body{ height: 70vh; overflow-y: auto; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 1</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2 ">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 2</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 3</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body 4</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> <div class="card removeit mb-2"> <div class="card-header"><span>Title</span></div> <div class="card-body"> <p>Card body</p> </div> <div class="card-footer"> <button class="btn btn-primary float-right clscurrent ml-2">Done</button> <button class="btn btn-danger float-right clscurrent">Skip</button> </div> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.clscurrent').on('click', function() { $(this).closest('.removeit').remove(); if($("#myModal").find('div.card').length==0) { $("#myModal").modal('hide'); } }); }); </script> </body> </html>
解決方案2
0 2022-06-17 06:29:27
如果您的模態長度不可用或小於一個，那么您可以應用此
$('#modal_name').modal('hide')
使用jQuery隱藏模態希望它會幫助你。
如何以jquery對話框模型形式或引導彈出窗口顯示CRUD視圖
[英]How to display CRUD views in a jquery dialog model form, or in a bootstrap popup
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.