This article mainly introduces to you in detail the effect of collecting Bootstrap custom confirm prompts. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
Effect
Write picture description here
js side
var Common = { confirm:function(params){ var model = $("#common_confirm_model"); model.find(".title").html(params.title) model.find(".message").html(params.message) $("#common_confirm_btn").click() //每次都将监听先关闭,防止多次监听发生,确保只有一次监听 model.find(".cancel").die("click") model.find(".ok").die("click") model.find(".ok").live("click",function(){ params.operate(true) }) model.find(".cancel").live("click",function(){ params.operate(false) }) } }
html side
<input type="hidden" id="common_confirm_btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#common_confirm_model"> <p id="common_confirm_model" class="modal"> <p class="modal-dialog modal-sm"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span></button> <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> <span class="title"></span> </h5> </p> <p class="modal-body small"> <p ><span class="message"></span></p> </p> <p class="modal-footer" > <button type="button" class="btn btn-primary ok" data-dismiss="modal">确认</button> <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button> </p> </p> </p> </p>
Calling
Common.confirm({ title: "标题", message: "内容", operate: function (reselt) { if (reselt) { ........ } else { ........ } } })
Related recommendations:
jQuery UI plug-in custom confirm confirmation box method_jquery
Introduction to the use of confirm() method in JavaScript
Three message boxes of JavaScript alert, confirm, prompt
The above is the detailed content of Bootstrap custom confirm prompt effect sharing. For more information, please follow other related articles on the PHP Chinese website!