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

2019年11月10日 阅读数:56
这篇文章主要向大家介绍基于.Net实现前端对话框和消息框,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子,并非说本身造的轮子确定好。因此,这个博客系统基本上都是本身实现的,包括日志记录、响应式布局等等一些本可使用插件的。好了,废话很少时。咱们来实现本身的对话框和消息框。javascript

对话框php

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

画一个简单的模型框html

<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;
         padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#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;
         }

是否是像那么回事了,不过如今还不能拖动。拖动,说白了就是在鼠标移动的时候不停的修改绝对定位。前端

首先修改如下样式:java

用js代码实现拖动效果:jquery

/鼠标按下时
     $( "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代码就实现了对话框的拖动效果。首先,只有当鼠标在对话框标题区域按下鼠标才能够拖动,而后鼠标移动的的时候实时计算和改变容器的位置,最后若是鼠标按键松开这清除鼠标移动事件。

点击按钮后可回调c++

不少时候,咱们点击肯定或取消的时候咱们须要执行回调(好比“您是否删除”,点击了肯定后确定须要作删除操做)。正则表达式

所有代码:(固然,这只是简单实现。还有不少须要继续细化的效果,如:背景遮罩、若是实现点击屡次对话框)sql

<!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>
 
<!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>

消息框

要求:自动定时关闭消息框、有消息分类(如:警告、错误、成功等)

画一个简单的模型框

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

添上基本样式

?
1
2
3
4
5
6
7
8
9
10
11
12
<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);

 

 

效果图:

加上消息类型(其实就是根据参数加不一样的图片而已)

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

效果图:

加上图标是否是更像那么回事了?

如上,咱们一样须要稍微整理下实现代码:

效果图:

所有代码:(一样,消息框也只是进行了简单实现。还有太多没有考虑,如(参数定位消息框位置、设置定时关闭时间、屡次触发消息框))

?
1
2
3
4
5