基于.Net实现前端对话框和消息框

更新时间：2021年9月22日 10:07 点击：1680

关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子，并不是说自己造的轮子肯定好。所以，这个博客系统基本上都是自己实现的，包括日志记录、响应式布局等等一些本可以使用插件的。好了，废话不多时。我们来实现自己的对话框和消息框。

对话框

要求：可拖动、点击按钮后可回调

画一个简单的模型框

<div class="hi-dialog-box clearfix">
    <div class="hi-dialog-title">系统提示</div>
    <div class="hi-dialog-content">
    </div>
    <div class="hi-dialog-foot">
      <input type="button" class="hi-dialog-determine" value="确定" />
      <input type="button" class="hi-dialog-cancel" value="取消" />
    </div>
</div>

添上基本的样式

div.hi-dialog-box {
      border: 1px #808080 solid;
      width: 350px;
      height: 200px;          
      border-radius: 3px;
    }
      div.hi-dialog-box div.hi-dialog-title {
        border: 1px #808080 solid;
        margin: 1px;
        padding: 1px;
        background-color: #dedcdc;
        height: 14%;
        cursor: move;
        font-size: 20px;
      }
      div.hi-dialog-box div.hi-dialog-content {
        height: 65%;
        margin: 5px;      
      }
      div.hi-dialog-box div.hi-dialog-foot {
        margin: 1px;
        padding: 1px;
        height: 14%;
      }
        div.hi-dialog-box div.hi-dialog-foot input {
          float: right;
          margin-left: 5px;
          font-size: 16px;
        }

效果图：

是不是像那么回事了，不过现在还不能拖动。拖动，说白了就是在鼠标移动的时候不停的修改绝对定位。

首先修改以下样式：

用js代码实现拖动效果：

//鼠标按下时
    $("div.hi-dialog-title").mousedown(function (event) {
      $("html").unbind();//首先清除事件方法
      var click_clientX = event.clientX;//记录鼠标按下时相对当前窗口的 x 坐标
      var click_clientY = event.clientY;//记录鼠标按下时相对当前窗口的 y 坐标
      //取的对话框容器
      var dialogBox = $(this).closest("div.hi-dialog-box");
      //记录对话框容器当前位置
      var dialogBoxX = parseInt($(dialogBox).css("left"));
      var dialogBoxY = parseInt($(dialogBox).css("top"));
      //鼠标移动时
      $("html").mousemove(dialog_mousemove = function (event) {
        //鼠标按下后移动量加上原来的位置
        var top = event.clientY - click_clientY + dialogBoxY;
        var left = event.clientX - click_clientX + dialogBoxX;
        //修改对话框位置（这里就实现了移动效果了）
        $(dialogBox).css({ "left": left, "top": top });
      });
      //鼠标按键松开时
      $("html").mouseup(function () {
        //清除鼠标移动事件
        $("html").unbind("mousemove", dialog_mousemove);
      });
    });

以上js代码就实现了对话框的拖动效果。首先，只有当鼠标在对话框标题区域按下鼠标才可以拖动，然后鼠标移动的的时候实时计算和改变容器的位置，最后如果鼠标按键松开这清除鼠标移动事件。

点击按钮后可回调

很多时候，我们点击确定或取消的时候我们需要执行回调（比如“您是否删除”，点击了确定后肯定需要做删除操作）。

如此，我们点击确定的时候会自动关闭对话框并可以执行自己需要执行的一些操作。可以，有同学会说，你这算什么狗屁对话框啊，html代码全都需要直接编码。是的，这只是简单的说下思路，下面我们来简单整理下。

效果图：

全部代码：（当然，这只是简单实现。还有很多需要继续细化的效果，如：背景遮罩、如果实现点击多次对话框）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    .clearfix:after {
      content: ' ';
      display: table;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    div.hi-dialog-box {
      border: 1px #808080 solid;
      width: 350px;
      height: 200px;
      position: absolute;
      top: 200px;
      left: 40%;
      border-radius: 3px;
    }
      div.hi-dialog-box div.hi-dialog-title {
        border: 1px #808080 solid;
        margin: 1px;
        padding: 1px;
        background-color: #dedcdc;
        height: 14%;
        cursor: move;
        font-size: 20px;
      }
      div.hi-dialog-box div.hi-dialog-content {
        height: 65%;
        margin: 5px;
        overflow: auto;
      }
      div.hi-dialog-box div.hi-dialog-foot {
        margin: 1px;
        padding: 1px;
        height: 14%;
      }
        div.hi-dialog-box div.hi-dialog-foot input {
          float: right;
          margin-left: 5px;
          font-size: 16px;
        }
  </style>
</head>
<body>
  <input value="对话框（确定）" onclick="click1();" type="button" />
  <input value="对话框（确定、取消）" onclick="click2();" type="button" />
  <div class="messg" style="margin: 10px; color: red; font-size: 23px"></div>
  <script src="../../Scripts/jquery-1.8.2.js"></script>
  <script type="text/javascript">
    var hiDialog = {
      init: function (title, messg, determineCallback, cancelCallback) {
        title = title || "系统提示";
        var determine = "", cancel = "";
        if (typeof (determineCallback) == "function")
          determine = '<input type="button" class="hi-dialog-determine" value="确定" />';
        if (typeof (cancelCallback) == "function")
          cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />';
        if (!$("div.hi-dialog-box").length) {
          var hi_dialog_box = '<div class="hi-dialog-box clearfix">\
                  <div class="hi-dialog-title"></div>\
                  <div class="hi-dialog-content">\
                  </div>\
                  <div class="hi-dialog-foot">\
                  </div>\
                </div>';
          $("body").append(hi_dialog_box);
        }
        var $box = $("div.hi-dialog-box");
        $box.find("div.hi-dialog-title").html(title);
        $box.find("div.hi-dialog-content").html(messg);
        $box.find("div.hi-dialog-foot").html(determine + cancel);
        $("div.hi-dialog-box").show();
        $box.find(".hi-dialog-determine").click(function () {
          determineCallback();
          hiDialog.close();
        });
        $box.find(".hi-dialog-cancel").click(function () {
          cancelCallback();
          hiDialog.close();
        });
        //鼠标按下时
        $("div.hi-dialog-title").mousedown(function (event) {
          $("html").unbind();
          var click_clientX = event.clientX;
          var click_clientY = event.clientY;
          var dialogBox = $(this).closest("div.hi-dialog-box");
          var dialogBoxX = parseInt($(dialogBox).css("left"));
          var dialogBoxY = parseInt($(dialogBox).css("top"));
          //鼠标移动时
          $("html").mousemove(dialog_mousemove = function (event) {
            var top = event.clientY - click_clientY + dialogBoxY;
            var left = event.clientX - click_clientX + dialogBoxX;
            $(dialogBox).css({ "left": left, "top": top });
          });
          //鼠标按键松开时
          $("html").mouseup(function () {
            $("html").unbind("mousemove", dialog_mousemove);
          });
        });
      },
      close: function () {
        $("div.hi-dialog-box").hide();
      }
    }
  </script>
  <script type="text/javascript">
    function click1() {
      hiDialog.init("系统提示！", "测试", function () {
        //点击确定后的回调执行
        $(".messg").text("点击了确定");
      });
    }
    function click2() {
      hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {
        $(".messg").text("点击了确定~~~");
      }, function () {
        $(".messg").text("点击了取消~~");
      });
    }
  </script>
</body>
</html>

消息框

要求：自动定时关闭消息框、有消息分类（如：警告、错误、成功等）

画一个简单的模型框

<div class="hi-message-box">
    <img class="hi-message-type" src="" />
    <span class="hi-message-messg">你不爱我了~~</span>
  </div>

添上基本样式

<style type="text/css">
    div.hi-message-box {
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
      background-color: #aee0c1;     
      min-width: 200px;
      max-width: 500px;
      font-size: 19px;
      border-radius: 3px;
    }
 </style>

效果图：

看上去是不是很简单呢？下面我们给它加上定时关闭消息功能。

定时关闭消息（表骂我，就是这么简单。我也想写复杂的。）

复制代码代码如下:

setTimeout(function () { $("div.hi-message-box").fadeOut("slow");}, 1200);

效果图：

加上消息类型（其实就是根据参数加不同的图片而已）

setTimeout(function () {
      $("div.hi-message-box").fadeOut("slow");
}, 1200);

效果图：

加上图标是不是更像那么回事了？

如上，我们同样需要稍微整理下实现代码：

效果图：

全部代码：（同样，消息框也只是进行了简单实现。还有太多没有考虑，如（参数定位消息框位置、设置定时关闭时间、多次触发消息框））

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    .clearfix:after {
      content: ' ';
      display: table;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    div.hi-message-box {
      padding: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
      background-color: #aee0c1;
      position: absolute;
      min-width: 200px;
      max-width: 500px;
      font-size: 19px;
      border-radius: 3px;
      top:200px;
      left:45%;
    }
      div.hi-message-box img {
        vertical-align: bottom;
      }
  </style>
</head>
<body>
  <input type="button" onclick="success();" value="成功消息" />
  <input type="button" onclick="error();" value="失败消息" />
  <input type="button" onclick="warn();" value="警告消息" />
  <script src="../../Scripts/jquery-1.8.2.js"></script>
  <script type="text/javascript">
    var hiMessageBox = {
      init: function (type, messg) {
        var hiMessageBox = '<div class="hi-message-box">\
                  <img class="hi-message-type" src="" />\
                  <span class="hi-message-messg"></span>\
                </div>';
        if (!$("div.hi-message-box").length) {
          $("body").append(hiMessageBox);
        }
        var $box = $("div.hi-message-box");
        $box.find(".hi-message-messg").text(messg);
        switch (type) {
          case 0://success 成功
            $box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
            break;
          case 1://warn 警告
            $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
            break;
          case 2://
            $box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
            break;
        }
        $("div.hi-message-box").fadeIn("slow")
        setTimeout(function () {
          $("div.hi-message-box").fadeOut("slow");
        }, 1200);
      },
      success: function (messg) {
        this.init(0, messg); 
      },
      warn: function (messg) {
        this.init(1, messg);
      },
      error: function (messg) {
        this.init(2, messg);
      }
    };   
  </script>
  <script type="text/javascript">
    function success() {
      hiMessageBox.success("成功");
    }
    function error() {
      hiMessageBox.error("失败");
    }
    function warn() {
      hiMessageBox.warn("警告");
    }
  </script>
</body>
</html>

演示地址：对话框演示地址消息框演示地址

以上所述是基于基于.Net实现前端对话框和消息框的全部叙述，希望对大家有所帮助，如果大家想了解更多内容，敬请关注猪先飞！

[!--infotagslink--]

上一篇: .net mvc超过了最大请求长度的解决方法

下一篇: Visual Studio 2015和 .NET Core安装教程

ASP.NET购物车实现过程详解
这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
.NET Core下使用Kafka的方法步骤
这篇文章主要介绍了.NET Core下使用Kafka的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
在ASP.NET 2.0中操作数据之七十二：调试存储过程
在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22
删除条目时弹出的确认对话框
复制代码代码如下: <td> <a href="/member/life/edit_ppt/<?php echo $v->id;?>" class="btn">编辑</a> <a href="javascript:;" onclick="if(confirm('您确定删除这条记录？')){location.href='/member/life/d...2014-06-07
Win10 IIS 安装.net 4.5的方法
这篇文章主要介绍了Win10 IIS 安装及.net 4.5及Win10安装IIS并配置ASP.NET 4.0的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下...2021-09-22
详解.NET Core 3.0 里新的JSON API
这篇文章主要介绍了详解.NET Core 3.0 里新的JSON API，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
.net数据库操作框架SqlSugar的简单入门
这篇文章主要介绍了.net数据库操作框架SqlSugar的简单入门，帮助大家更好的理解和学习使用.net技术，感兴趣的朋友可以了解下...2021-09-22
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
记一次EFCore类型转换错误及解决方案
这篇文章主要介绍了记一次EFCore类型转换错误及解决方案，帮助大家更好的理解和学习使用asp.net core，感兴趣的朋友可以了解下...2021-09-22
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识，主要对比说明在Bootstrap开发中用到的这些技术要点，对此文感兴趣的朋友一起学习吧...2016-05-14
C#使用Ado.Net更新和添加数据到Excel表格的方法
这篇文章主要介绍了C#使用Ado.Net更新和添加数据到Excel表格的方法,较为详细的分析了OLEDB的原理与使用技巧,可实现较为方便的操作Excel数据,需要的朋友可以参考下...2020-06-25
.NET C#利用ZXing生成、识别二维码/条形码
ZXing是一个开放源码的，用Java实现的多种格式的1D/2D条码图像处理库，它包含了联系到其他语言的端口。这篇文章主要给大家介绍了.NET C#利用ZXing生成、识别二维码/条形码的方法，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴。...2020-06-25
asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮，其在工具箱中的图标为，单选按钮通常成组出现，用于提供两个或多个互斥选项，即在一组单选钮中只能选择一个...2021-09-22
ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19
详解.NET Core 使用HttpClient SSL请求出错的解决办法
这篇文章主要介绍了.NET Core 使用HttpClient SSL请求出错的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-09-22
Python调用.NET库的方法步骤
这篇文章主要介绍了Python调用.NET库的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-09
ASP.NET中iframe框架点击左边页面链接右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码，感兴趣的小伙伴们可以参考一下...2021-09-22
创建一个完整的ASP.NET Web API项目
ASP.NET Web API具有与ASP.NET MVC类似的编程方式，ASP.NET Web API不仅仅具有一个完全独立的消息处理管道，而且这个管道比为ASP.NET MVC设计的管道更为复杂，功能也更为强大。下面创建一个简单的Web API项目，需要的朋友可以参考下...2021-09-22

基于.Net实现前端对话框和消息框

相关文章

阁下可能感兴趣的内容

推荐阅读