Bootstrap modal onclick before modal 运行

Question

我在我的网站上使用引导模式，我希望能够在调用它时设置模型的文本

为此我打算使用 onclick 函数。

示例：当用户单击按钮 "delete list" 时，会弹出一个模式，其中包含我在该特定 onclick 函数中设置的 header：

 function functionCalledByOnclick(){
   $("#modalHeader").html("<p>Are you sure you want to remove **?</p>");

但是也可以按下按钮 "save"，在这种情况下 header 应该显示不同的内容。

但是，当我单击这些按钮之一时，模态显示在函数运行之前，因此未设置 header 文本。

我可以使用onclick 函数在模式中设置文本吗？还是我必须另寻出路？

Answer 1

当然你可以在模态中设置文本。

<script>

function functionCalledByOnclickDelete(){
  $("#modalname .modal-body p").text("Are you sure you want to remove **?");
  $('#modalname').modal('show');
}

function functionCalledByOnclickSave(){
  $("#modalname .modal-body p").text("Are you sure you want to save **?");
  $('#modalname').modal('show');
}

</script>

<div class="modal fade" id="modalname" tabindex="-1" role="dialog" aria-labelledby="simpleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>This text will be replaced after the function is called.</p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 2

在 JQuery 中，像这样使用 onclick 事件更容易。这样你只需要给每个按钮分配一个id，也更省心。

$(document).ready( function () {
    var deleteText = "<p>Are you sure you want to remove **?</p>";
    var saveText = "<p>Do you want to save **?</p>";

    $("#deleteButton").click( function () {
        $("#modalHeader").html(deleteText);
        $("#modal").modal("show");
    });

    $("#saveButton").click( function () {
        $("#modalHeader").html(saveText);
        $("#modal").modal("show");
    });
});

你当然可以通过擦除变量来缩短它，但这样更有条理。

Bootstrap modal onclick before modal 运行

Bootstrap modal onclick before modal is run

jquery

modal-dialog

onclick

bootstrap-modal