实现弹出和确认消息对话框效果
Posted jiguiyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现弹出和确认消息对话框效果相关的知识，希望对你有一定的参考价值。
在项目的页面中，由于需要经常与用户进行交互。在提交页面的表单的时，如果用户名（文本框）为空，则通过提示框提示用户输入的内容；如果删除记录，同样也需要确认是否删除。如果直接通过javascript语言中的alert（）方法和confirm（）方法实现，不仅不能达到预期的效果，代码还比较复杂，因此我将通过jQuery UI插件的对话框来进行实现。详细介绍如下：
初始时的效果：
包含用户输入框和删除按钮的页面：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script> <!--<script type="text/javascript" src="js/jquery-ui.js" ></script>--> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> </head> <body> <div class="demo"> <div style="background-color:#eee;padding:5px;width:260px"> 请输入用户：<br /> <input id="txtName" type="text" class="txt"/> <input id="btnSubmit" type="submit" value="提交" class=‘btn‘/ > </div> <div style="padding: 5px; width: 260px;"> <span id="spanName">hello</span> <input id="btnDelete" type="button" value="删除" class="btn"/> </div> <div id="dialog"></div> </div> </body> </html>
实现弹出和确定信息对话框功能：
弹出提示信息对话框功能：
删除确认消息对话框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>对话框的实现</title> <link href="js/jquery-ui.css" rel="stylesheet"> <style type="text/css"> body { font-size: 62.5%; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } table { font-size: 1em; } .demo-description { clear: both; padding: 12px; font-size: 1.3em; line-height: 1.4em; } .ui-draggable, .ui-droppable { background-position: top; } div{line-height:1.8em} .txt{border:#666 1px solid;padding:2px;width:180px;margin-right:3px} button,.btn {border:#666 1px solid;padding:2px;width:60px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> <script src="js/jquery-3.2.1.js"></script> <script src="js/jquery-ui.js"></script> <script> $(function() { $("#btnSubmit").on("click", function() { //检测按钮事件 if ($("#txtName").val() == "") { //如果文本框为空 sys_Alert("姓名不能为空！请输入姓名"); } }); $("#btnDelete").on("click", function() { //询问按钮事件 if ($("#spnName").html() !=null) { //如果对象不为空 sys_Confirm("您真的要删除该条记录吗？"); return false; } }); }); function sys_Alert(content) { //弹出提示信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: ‘系统提示‘, hide: ‘slide‘, buttons: { Cancel: function() { $(this).dialog("close"); } }, open: function(event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); } function sys_Confirm(content) { //弹出询问信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: ‘系统提示‘, hide: ‘slide‘, buttons: { ‘确定‘: function() { $("#spnName").remove(); $(this).dialog("close"); }, ‘取消‘: function() { $(this).dialog("close"); } }, open: function(event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); } </script> </head> <body> <div class="demo-description"> <div style="background-color:#eee;padding:5px;width:260px"> <input id="txtName" type="text" class="txt" /> <input id="btnSubmit" type="button" value="提交" class="btn" /> </div> <div style="padding:5px;width:260px"> <span id="spnName">hello</span> <input id="btnDelete" type="button" value="删除" class="btn" /> </div> <div id=‘dialog-modal‘></div> </div> </body> </html>
在自定义方法sys_Alert()中，通过dialog方法实现弹出提示信息对话框，而在自定义方法sys_Confirm()中，通过dialog方法实现弹出确认信息对话框。
以上是关于实现弹出和确认消息对话框效果的主要内容，如果未能解决你的问题，请参考以下文章