JS加HTML實現彈窗提示是否確認提交

来源:https://www.cnblogs.com/camg/archive/2020/06/17/13151171.html
-Advertisement-
Play Games

需求:當點擊input按鈕時候,彈出確認框,確認後提交到指定url,效果如下 分析:這裡面要,引入三個庫文件,如下是下載地址 layui樣式文件:https://layer.layui.com/ layer彈窗組件:https://www.layui.com/ jquery代碼庫:http://ww ...


需求:當點擊input按鈕時候,彈出確認框,確認後提交到指定url,效果如下

分析:這裡面要,引入三個庫文件,如下是下載地址

  layui樣式文件:https://layer.layui.com/

  layer彈窗組件:https://www.layui.com/

  jquery代碼庫:http://www.jq22.com/

代碼:下載後放入響應的項目目錄,最後代碼如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<!-- 你的HTML代碼 -->
<form>
    <input type="button" value="提交" onclick="buyAffirm('t.php?id=25')">
</form>
<!-- 引入的庫文件 -->
<script src="../layui/layui.all.js"></script>
<script src="../layer/layer.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    console.log(1)
    function buyAffirm(url) {
        layer.alert('確定提交嗎?', {
        skin: 'layui-layer-molv' //樣式類名 自定義樣式
      , closeBtn: 1 // 是否顯示關閉按鈕
      , title : '未來社區提示!!' //標題
      , anim: 1 //動畫類型
      , btn: ['確定''取消'//按鈕
            , yes: function() {
          //這裡也可以寫響應的ajax請求                 window.location.href
=url             } , btn2: function () { layer.msg('取消') }         })     } </script> </body> </html>

ps:請求的是同級目錄下的t.php文件,最終列印輸出,當然yes:方法裡面,也可以下響應的ajax請求。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. 前言 AndroidX replaces the original support library APIs with packages in the androidx namespace. Only the package and Maven artifact names changed; ...
  • // 設計稿自定義為375px 利用測量的px大小除以50px 即可得到所需rem值 (function () { remLayout(); function remLayout() { // 獲取屏幕寬度 var w = document.documentElement.clientWidth | ...
  • 效果圖 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>仿京東 ...
  • Vue源碼閱讀(一) 準備工作,包括npm run dev做了哪些,src目錄結構。 ...
  • # 從零開始的前端生活--float和overflow float 本質 浮動的本質就是為了實現文字環繞效果。 浮動的特征 包裹與自適應性。 塊狀化,float不為none時,它的display就是block 萬惡之源 使父元素的高度塌陷 <div> <img src="../image/pic0 ...
  • 一,簡介 HTML 指超文本標簽語言。 HTML 是通向 WEB 技術世界的鑰匙。 HTML 5 是下一代的 HTML。 HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。 二,標簽 - 標題標簽 <h1 - h6> 定義和用法 <h1> - <h6> 標簽可定義標 ...
  • 項目根目錄下增加vue.config.js文件 // vue.config.js module.exports = { lintOnSave: false } ...
  • 隨著互聯網行業的火爆,近年來,想轉前端的學生和職場人越來越多,甚至出現了這樣一種現象:360行,行行轉前端。現在在網上隨便搜“轉行”、“前端”,都是醬紫的: 為什麼那麼多人都想做前端工程師?究其原因,就是前端有三好,薪資高,門檻低,前景也挺好。 Part.1 薪資高 讓我們先來看下某招聘網站統計的前 ...
一周排行
    -Advertisement-
    Play Games
  • 基於.NET Framework 4.8 開發的深度學習模型部署測試平臺,提供了YOLO框架的主流系列模型,包括YOLOv8~v9,以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景,同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱,重啟開發之路 十年前,我沉浸在開發的海洋中,每日與代碼為伍,與演算法共舞。那時的我,滿懷激情,對技術的追求近乎狂熱。然而,隨著歲月的流逝,生活的忙碌逐漸占據了我的大部分時間,讓我無暇顧及技術的沉澱與積累。 十年間,我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者,我見證了 ...
  • C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺,平臺包含了語言規範、工具、運行,支持開發各種應用,如Web、移動、桌面等。.NET框架有多個實現,如.NET Framework、.NET Core(及後續的.NET 5+版本),以及社區版本M... ...
  • 前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫,記錄了使用電腦模擬,模擬PLC,直至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1. PLC開發編程環境GX Works2,GX Works2下載鏈接 https:// ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝 ...
  • 前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了,這篇文章整點js代碼來測一下bug。測試網站:https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向(MD5加密,AES加密)附完整源碼 ...
  • 引言 現代的操作系統(Windows,Linux,Mac OS)等都可以同時打開多個軟體(任務),這些軟體在我們的感知上是同時運行的,例如我們可以一邊瀏覽網頁,一邊聽音樂。而CPU執行代碼同一時間只能執行一條,但即使我們的電腦是單核CPU也可以同時運行多個任務,如下圖所示,這是因為我們的 CPU 的 ...
  • 掌握使用Python進行文本英文統計的基本方法,並瞭解如何進一步優化和擴展這些方法,以應對更複雜的文本分析任務。 ...
  • 背景 Redis多數據源常見的場景: 分區數據處理:當數據量增長時,單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源,可以將數據分區存儲在不同的實例中,使得數據處理更加高效。 多租戶應用程式:對於多租戶應用程式,每個租戶可以擁有自己的Redis數據源,以確保數據隔離和安全性。 ...