jQuery 实现 bootstrap 模态框 删除确认

时间:2022-09-20 22:30:10

思路:

点击删除按钮,通过jquery将删除操作的URL赋值到页面URL元素,并弹出会话框

用户点击确认,通过jquery获取URL,并发送删除请求至后台。

一、删除button

<a class="btn btn-primary" onClick="delcfm('${ctxPath}/manager/project/delete?id=${vo.id?default("")}')">删除</a>

二、js定义


  1. function delcfm(url) {
  2. $('#url').val(url);//给会话中的隐藏属性URL赋值
  3. $('#delcfmModel').modal();
  4. }
  5. function urlSubmit(){
  6.    var url=$.trim($("#url").val());//获取会话中的隐藏属性URL
  7.    window.location.href=url;  
  8. }

一、定义dialog会话框


  1. <!-- 信息删除确认 -->
  2. <div class="modal fade" id="delcfmModel">
  3. <div class="modal-dialog">
  4. <div class="modal-content message_align">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  7. <h4 class="modal-title">提示信息</h4>
  8. </div>
  9. <div class="modal-body">
  10. <p>您确认要删除吗?</p>
  11. </div>
  12. <div class="modal-footer">
  13. <input type="hidden" id="url"/>
  14. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  15. <a onclick="urlSubmit()" class="btn btn-success" data-dismiss="modal">确定</a>
  16. </div>
  17. </div><!-- /.modal-content -->
  18. </div><!-- /.modal-dialog -->
  19. </div><!-- /.modal -->

jQuery 实现 bootstrap 模态框 删除确认的更多相关文章

  1. jquery 修改 bootstrap模态框的宽度并且居中

    1.定义模态框 <div class="modal fade" id="Project_Cell_Modal" tabindex="-1&quo ...

  2. 7-20 jquery遍历节点,bootstrap模态框绑定事件和解绑,mock&period;js,model&period;urlroot&comma;id&comma;打基础

    7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...

  3. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  4. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

  5. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  6. Bootstrap&comma; 模态框实现值传递&comma;自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  7. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  8. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  9. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

随机推荐

  1. WooCommerce

    http://devework.com/woocommerce.html https://woocommerce.com/ https://woocommerce.com/product-catego ...

  2. Total Commander解压位置

    TC解压到当前文件夹下 TC也是用了一段时间,现在勉强也算用习惯了,今天在解压文件的时候感觉步骤麻烦,之前解压都是解压到另一个窗口,所以一直是ALT+8同步窗口,然后解压文件.但一般解压文件都是解压到 ...

  3. javascript笔记8-表单脚本、JSON、AJAX

    通过表单提交,很方便的可以从界面把参数传递给后台. 如果前后台我们有大量数据需要交互,JSON方便我们传递和读取. 如果需要更新一个界面的某一部分数据,并不想刷新界面,就要用到Ajax. 1. 表单脚 ...

  4. php基本框架

  5. 常用python处理try except异常的三种方式

    如果你在写python程序时遇到异常后想进行如下处理的话,一般用try来处理异常,假设有下面的一段程序: try:     语句1     语句2     .     .     语句N except ...

  6. jQuery选择器与CSS选择器

    1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul ...

  7. 抓取60000&plus;QQ空间说说做一次数据分析

    对于QQ空间的数据一直来是垂涎不已,老早就想偷过来研究研究,这几天闲下来便开始动手... 整个程序的流程为:登录-->获取cookie-->获取所有的好友qq_number-->根据 ...

  8. 关于Newtonsoft&period;Json,LINQ to JSON的一个小demo

    nuget获取Newtonsoft.Json github地址:Newtonsoft.Json public static void Test1() { /* 文本格式如下 代码实现目的: 1.VR ...

  9. APP需求调研、对比

    二.人脸验证 1.芝麻认证 : 0.4元/次,需要企业企业认证.不能有与芝麻信用类似的业务,如:保险... 2.旷视 : 0.5/次.企业认证.业务限制 3. 百度人脸识别 :  企业认证. 4.科大 ...

  10. 用Python实现随机森林算法,深度学习

    用Python实现随机森林算法,深度学习 拥有高方差使得决策树(secision tress)在处理特定训练数据集时其结果显得相对脆弱.bagging(bootstrap aggregating 的缩 ...