Menu

关于bootstrap实现弹出框(提醒框和确认取消框)

2017年11月13日 - php

一共需要三个模块:

第一个模块,触发弹框的组件:

<button type=”button” class=”btn btn-info” style=”margin-bottom:10px;margin-left:5px;”><a onClick=”delConfirm(‘url’)”>确认完成</a></button> 

第二个模块,对话框组件:

<div style=”top:200px;” class=”modal fade” id=”delConfirmModel”>
     <div class=”modal-dialog”>
         <div class=”modal-content message_align”>
              <div class=”modal-header”>
                     <button type=”button” class=”close” data-dismiss=”modal” aria-  label=”Close”>   <span aria-hidden=”true”>×</span></button>
                         <h4 class=”modal-title”>提醒</h4>
              </div>
             <div class=”modal-body”>
                   <p>您确认要提交吗?</p>
             </div>
            <div class=”modal-footer”>
                <input type=”hidden” id=”url”/>
                <button type=”button” class=”btn btn-default” data-dismiss=”modal”>取消  </button>
               <a onclick=”urlSubmit()” class=”btn btn-success” data-dismiss=”modal”>确定</a>
            </div>
        </div>
   </div>
</div>           

第三个模块,js函数模块,delConfirm()函数用于调用对话框同时传递模块一中的URL,urlSubmit()函数用于跳转,即确认后就会跳转至模块一中的URL。          

/*开发完成确认框*/
function delConfirm(url) {
      $(‘#url’).val(url);//给会话中的隐藏属性URL赋值
      $(‘#delConfirmModel’).modal();
}
function urlSubmit(){
      var url = $(“#url”).val();//获取会话中的隐藏属性URL
      window.location.href = url;
}

    稍微有点基础的人,应该都看得懂。   

    这里给出我做的项目的效果图:

    第一步:第二步:

很好用的,前提是用引入bootstrap的js和css文件,当然也少不了jquery文件。                                                                                                                    :mrgreen: 

分享

发表评论