利用Bootstrap实现删除确认取消提示弹窗

首先引入Bootstrap的css样式文件和js文件


<!--引入外部的bootstrap中的css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--jQuery文件务必在bootstrap.min.js之前引入-->
    <script src="jquery/2.4.1/jquery.min.js"></script>
<!--再引入bootstrap.min.js-->
<script src="bootstrap/js/bootstrap.min.js"></script>

写入HTML代码

<!-- 删除提示框 -->
  <div class="modal fade" id="delcfmModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <h4 class="modal-title">确认信息</h4>
            
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>            </div>
            <div class="modal-body">
                <p id="delcfmMsg">您确认要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a class="btn btn-success" data-dismiss="modal" id="btnOkDelete" >确定</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript代码

function deletePost(postId){
		//弹出提示框
		$('#delcfmModel').modal({ backdrop: 'static', keyboard: false })
	        .one('click', '#btnOkDelete', function() {
	        	
	        	//这里放入点击确认后的代码
	        	$.post("administrator/adminDeletePost",{"postId":postId}, function(data){
	    	 		if(data=="4008"){
	    	            layer.msg('删除帖子成功');
	    	            $("#relieve"+postId).parent().parent().hide();
	    	            return ;
	    	 		}
	             layer.msg('好像出错了，等会儿再试吧');
	    		 return ;
	    	 	});
	    });
	}