在确认消息 onclick(） 时使用引导程序

Using bootstrap on confirm message onclick()

本文关键字：引导程序 确认 消息 onclick      更新时间：2023-09-26

我是引导程序的新手，我有用于消息确认的代码。

如何使用下面的代码放置我的onclick()？

$("#myModal").on("show", function() {    // wire up the OK button to dismiss the modal when shown
    $("#myModal a.btn").on("click", function(e) {
        console.log("button pressed");   // just as an example...
        $("#myModal").modal('hide');     // dismiss the dialog
    });
});
$("#myModal").on("hide", function() {    // remove the event listeners when the dialog is dismissed
    $("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() {  // remove the actual elements from the DOM when fully hidden
    $("#myModal").remove();
});
$("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
  "backdrop"  : "static",
  "keyboard"  : true,
  "show"      : true                     // ensure the modal is shown immediately
});

引导框的网页：

网页（图片）

onclick（） 输入：

<input type='submit' name='actualiza_noticia' class='button' onClick="" value='Atualizar notícia'>

>您可以使用 jQuery 函数$(elem).modal('show')函数或 Bootstrap html 数据属性：

使用数据属性： 

<input type='submit' data-toggle="modal" data-target="#myModal" name='actualiza_noticia' class='button' value='Atualizar notícia' >

使用 Jquery 函数：

<input onclick="$('#myModal').modal('show')" type='submit' name='actualiza_noticia' class='button' value='Atualizar notícia' >

这些 shuold 都会触发您的事件，尽管'show'事件'shown.bs.modal'符合 Bootstrap 3

： 
$("#myModal").on('shown.bs.modal', function() {    // wire up the OK button to dismiss the modal when shown
    $("#myModal a.btn").on("click", function(e) {
        console.log("button pressed");   // just as an example...
        $("#myModal").modal('hide');     // dismiss the dialog
    });
});

在此处阅读有关引导模式的更多信息。

根据报告您的html的图像，我的建议是：

  • 将$("#myModal").on("show", function() {更改为'$（"#myModal"）.on（"display.bs.modal"， function（） {
  • 将$("#myModal a.btn").on("click", function(e) {更改为$("#myModal button.button.btn.btn-primary").on("click", function(e) {
  • 将$("#myModal").on("hide", function() {更改为$("#myModal").on("hide.bs.modal", function() {
  • 将$("#myModal a.btn").off("click");更改为$("#myModal button.btn.btn-primary").off("click");

有关详细信息，请参阅引导模式

 $(function () {
            $("#myModal").on("shown.bs.modal", function() {    // wire up the OK button to dismiss the modal when shown
                $("#myModal button.btn.btn-primary").on("click", function(e) {
                    console.log("button pressed");   // just as an example...
                    $("#myModal").modal('hide');     // dismiss the dialog
                });
            });
            $("#myModal").on("hide.bs.modal", function() {    // remove the event listeners when the dialog is dismissed
                $("#myModal button.btn.btn-primary").off("click");
            });
            $("#myModal").on("hidden", function() {  // remove the actual elements from the DOM when fully hidden
                $("#myModal").remove();
            });
            $("#myModal").modal({                    // wire up the actual modal functionality and show the dialog
                "backdrop"  : "static",
                "keyboard"  : true,
                "show"      : true                     // ensure the modal is shown immediately
            });
        });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog box -->
            <div class="modal-body">
                <button type="btn btn-default" class="close" data-dismiss="modal">&times;</button>
                Hello world!
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer">
                <button type="btn btn-default" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

相关文章：