如果模型弹出窗口中没有可用数据，如何自动关闭引导模型弹出窗口
[英]How to close bootstrap model popup automatically if not available data in model popup
问题描述
Here I'm using bootstrap model, in that model I have some bootstrap cards but every card have a close button if I hit on the close button the card will hide/removed from the bootstrap model popup when model popup have only one card and if I want close that last card also now this time i want to close model popup also automatically.
在这里我使用引导模型，在那个模型中我有一些引导卡，但是如果我点击关闭按钮，每张卡都有一个关闭按钮，当模型弹出窗口只有一张卡时，卡将隐藏/从引导模型弹出窗口中删除，如果我现在也想关闭最后一张卡，这次我也想自动关闭模型弹出窗口。 but i am not able to achieve it.但我无法实现它。 any one can please help on me it.任何人都可以请帮帮我。
<!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
Try This :尝试这个 ：
<!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
If your modal length is not available or less than one then you can apply this如果您的模态长度不可用或小于一个，那么您可以应用此
$('#modal_name').modal('hide')
using jQuery to hide the modal Hope it will help you.使用jQuery隐藏模态希望它会帮助你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
防止引导 model 弹出窗口在按空格键时关闭 - Prevent bootstrap model popup to close on pressing space key
在bootstrap模型弹出窗口中旋转文本 - Rotate text in bootstrap model popup
daterangepicker在引导模型弹出窗口中不起作用 - daterangepicker NotWorking in bootstrap model popup
引导网页中的两种模型弹出窗口 - Two model Popup in bootstrap webpage
引导多个模型弹出窗口不起作用 - Bootstrap multiple model popup not working
如何自动关闭弹出表单？ - how to close popup form automatically?
如何关闭“模型”弹出窗口jQuery - how can i close the Model popup window jquery
MVC将表行数据传输到引导模型弹出窗口 - MVC transfer Table row data to bootstrap model popup
如何以jquery对话框模型形式或引导弹出窗口显示CRUD视图 - How to display CRUD views in a jquery dialog model form, or in a bootstrap popup
如何从 typescript 文件打开引导弹出窗口 model - How to open bootstrap popup model from typescript file
相关标签