如何在JavaScript/jQuery中弹出模式并运行复选框检查？_Javascript_Jquery_Twitter Bootstrap_Checkbox_Modal Dialog

如何在JavaScript/jQuery中弹出模式并运行复选框检查？

javascript jquery twitter-bootstrap checkbox

如何在JavaScript/jQuery中弹出模式并运行复选框检查？,javascript,jquery,twitter-bootstrap,checkbox,modal-dialog,Javascript,Jquery,Twitter Bootstrap,Checkbox,Modal Dialog,我需要回答一个问题，老实说，这个问题几乎和我的完全一样。唯一的区别是，我尝试使用Bootstrap3.1.1显示模式，而不是显示JS警报以下是迄今为止我对相关代码的了解： HTML 现在，必须选中复选框的条件必须存在，并且只有选中复选框并按下按钮时，才会弹出模式欢迎任何建议。说真的，这让我快发疯了！> 我猜你有JQuery 下面是一个JSFIDLE，它可能会向您展示如何使用引导实现这一点： HTML × 模态头 @j08691为什么编辑我的问题？我不知道为什么删除了我的评论，但为了回答

我需要回答一个问题，老实说，这个问题几乎和我的完全一样。唯一的区别是，我尝试使用Bootstrap3.1.1显示模式，而不是显示JS警报

以下是迄今为止我对相关代码的了解：

HTML

现在，必须选中复选框的条件必须存在，并且只有选中复选框并按下按钮时，才会弹出模式

欢迎任何建议。说真的，这让我快发疯了！> 我猜你有JQuery

下面是一个JSFIDLE，它可能会向您展示如何使用引导实现这一点：

HTML


×
模态头

@j08691为什么编辑我的问题？我不知道为什么删除了我的评论，但为了回答你的问题，我修复了你的标签并删除了多余的文本。奇怪的是，我不知道你可以这么做。此外，我没有删除该评论。不知道它是怎么被移除的。奇怪：/这是SO魅力的一部分。任何人几乎都可以编辑任何内容（只要你有代表——有强大的力量就会产生一些东西，我忘记了细节）。无论如何，我不是有意暗示你删除了评论。哈哈，你没有。一切都好请尝试一下，如果有效，我会将其标记为已解决德姆，实际上我注意到你没有勾选复选框。这并不能完全回答这个问题。对不起，我的工作不是为您编写全部代码；-）否则，我不会帮助您问：既然此代码存在于.NET环境中，那么a标记是否在服务器级别运行是否重要？（runat=“server”）这无关紧要，只要HTML（视图源代码）对于JQuery处于良好状态

<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
    ...
    <p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
    <label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
    <button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
   ...
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                    <!-- Content here -->
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="submitModal()" class="btn">Click Me</button>
                </div>
            </div>
        </div>
    </div>
    ...
</form>

function submitCheck(chkbox,error) {
    if (document.getElementById(chkbox).checked == false) {
        document.getElementById(error).style.display = "block";
    } else {            
        window.location.href = "#myModal";
    }
}

// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
    $('#modal-content').modal({
        show: true
    });
});

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>

<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>
                    <input type="text" id="txtname" />
                </p>
            </div>
            <div class="modal-footer"> 
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                 <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>