Home  >  Article  >  Web Front-end  >  Bootstrap custom confirm prompt effect example sharing

Bootstrap custom confirm prompt effect example sharing

小云云
小云云Original
2018-02-05 13:48:271983browse

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>

Call


Common.confirm({
   title: "标题",
   message: "内容",
   operate: function (reselt) {
     if (reselt) {
       ........
     } else {
       ........
     }
   }
 })

Related recommendations:

##jquery form validation imitation Toast prompt effect example sharing

jquery simulates title prompt effect

jquery php Baidu search box smart prompt effect_PHP tutorial

The above is the detailed content of Bootstrap custom confirm prompt effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn