堆栈内存溢出
  简体   繁体   English

单击按钮后如何关闭弹出模式

[英]How to close popup modal after button click

 原文  2017-10-21 06:41:26  3   4    javascript/ jquery

问题描述

How to close popup modal after the checkbox is checked and then the button is clicked?选中复选框然后单击按钮后如何关闭弹出模式？

If checkbox is not checked then not to close modal.如果未选中复选框，则不要关闭模态。 Checkbox and button placed inside modal.复选框和按钮放置在模态内。 When I checking the checkbox and clicking the button modal is not closing.当我选中复选框并单击按钮时，模态没有关闭。 

 $(document).ready(function(){ $('.one:checked').on('click' , '.close_model' , function(){ dialog('close'); }); });
 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" 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">Modal Header</h4> </div> <div class="modal-body"> <button type="button" class="close_model btn btn-danger">button</button> <input type="checkbox" name="ch" class="one"> <input type="checkbox" name="ch" class="one"> <input type="checkbox" name="ch" class="one"> <input type="checkbox" name="ch" class="one"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

4 个解决方案

解决方案1
 1  2017-10-21 14:02:22

change close button code like this像这样更改关闭按钮代码

 <button type="button" class="btn btn-default close">Close</button>

and then add this JQuery code然后添加此 JQuery 代码

$('.close').click(function(){

if ($('.one').is(':checked'))
{
 $("#myModal").modal('toggle');
}

}) })

here you go working sample在这里你去工作样本

解决方案2
 0 已采纳  2017-10-21 07:14:26

<!DOCTYPE html>
<html lang="en">
     <head>
            <title>Bootstrap Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     </head>
     <body>
            <div class="container">
                 <h2>Modal Example</h2>
                 <!-- Trigger the modal with a button -->
                 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
                 <!-- Modal -->
                 <div class="modal fade" id="myModal" 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">Modal Header</h4>
                                    </div>
                                    <div class="modal-body">
                                         <input type="hidden" name="txt1" id="textbox1">
                                         <button type="button" class="close_model btn btn-danger">button</button>
                                         <input type="checkbox" name="ch" class="one" value="1">
                                         <input type="checkbox" name="ch" class="one" value="2">
                                         <input type="checkbox" name="ch" class="one" value="3">
                                         <input type="checkbox" name="ch" class="one" value="4">
                                    </div>
                                    <div class="modal-footer">
                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                             </div>
                        </div>
                 </div>
            </div>
            <script type="text/javascript">
                 $(document).ready(function(){
                 $(".close_model").on("click",function(){
                 if($('#textbox1').val() == 'true'){
                    $('.close').trigger('click');
                 }else{
                    alert('pls click on checkbox');
                 }
                 });
                 $('.one').change(function() {
                            if(this.checked) {
                                    $(this).prop("checked", 'true');
                            }
                            $('#textbox1').val(this.checked);
                    });
                 });
            </script>
     </body>
</html>

解决方案3
 0  2017-10-21 08:36:00

Hi there create a function and ad the function to button click event.嗨，创建一个函数并将该函数广告到按钮单击事件。

<button type="button" class="close_model btn btn-danger" onclick="CheckChecked();">button</button>

Function CheckChecked()
{
var x = document.getElementById("ch").checked;
    if (x)
{
$('#myModal').modal('hide');
}
}

解决方案4
 0  2020-06-10 01:42:20

        $("#selectItem").click(function(){

        var value = $("input[type='radio']:checked").val();

        $('#town').val(value);
        $("#myModal").modal('hide'); 
    });

<button type="button" id="selectItem" name="selectItem" class="btn btn-primary">Select</button>

The above code worked for me上面的代码对我有用

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何修复在单击按钮打开后立即关闭的模式弹出窗口 - How to fix modal popup that close immediately after click button to open 单击提交按钮后如何关闭模式 - How to close modal after click on submition button 当我们点击保存或取消按钮时如何关闭弹出模式 - How to close the popup modal when we click on save or cancel button 如何从ASP.NET按钮单击关闭模态弹出窗口？ - How to close a Modal popup from ASP.NET button click? 如何在模态弹出窗口中添加 X 关闭按钮和外部单击关闭功能？ - How to add X close button and outside click close function on modal popup? 样式关闭后，模式关闭按钮将不会单击 - Modal close button will not click after styling 自动关闭模态弹出窗口，而不是使用按钮/单击 - Auto close a Modal Popup instead of using a button/on-click 如何在按钮单击时打开模态弹出窗口 - How to open Modal popup on button click Testcafe，如何单击模式弹出窗口上的按钮？ - Testcafe, how to click a button on a modal popup? 单击按钮关闭模式 - close modal on button click
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM