Implement front-end dialog box and Message Box Based on. Net and. net front-end

Implement front-end dialog box and Message Box Based on. Net and. net front-end

There are numerous excellent plug-ins for front-end dialog boxes and message boxes. The purpose of wheel creation is to make better use of the wheel, not to say that the wheel made by yourself must be good. Therefore, this blog system is basically self-implemented, including logging, responsive layout, and some other plug-ins that can be used. Well, there is not much nonsense. Let's implement our own dialog box and message box.

Dialog Box

Requirements: You can drag or click a button to call back

Draw a simple model box

<Div class = "hi-dialog-box clearfix"> <div class = "hi-dialog-title"> system prompt </div> <div class = "hi-dialog- content "> </div> <div class =" hi-dialog-foot "> <input type =" button "class =" hi-dialog-determine "value =" OK" /> <input type = "button" class = "hi-dialog-cancel" value = "cancel"/> </div>

Add basic styles

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;        }

:

Is it like that, but you cannot drag it now. Drag. To put it bluntly, the absolute positioning is constantly modified when the mouse moves.

First, modify the following style:

Use js Code to achieve drag effect:

// $ ("Div. hi-dialog-title "). mousedown (function (event) {$ ("html "). unbind (); // first clear the event Method var click_clientX = event. clientX; // record the x coordinate var click_clientY = event relative to the current window when the mouse is pressed. clientY; // record the y coordinate relative to the current window when the mouse is pressed // The container var dialogBox =$ (this) of the get dialog box ). closest ("div. hi-dialog-box "); // record the current position of the container in the dialog box var dialogBoxX = parseint($dialogbox).css (" left "); var dialogBoxY = parseint((dialogbox).css (" top ")); // when you move the cursor $ ("html "). mousemove (dialog_mousemove = function (event) {// After the mouse is pressed, add the original position var top = event. clientY-click_clientY + dialogBoxY; var left = event. clientX-click_clientX + dialogBoxX; // modify the position of the dialog box (the moving effect is achieved here) using (dialogbox).css ({"left": left, "top": top });}); // when the mouse button is released $ ("html "). mouseup (function () {// clear the mouse movement event $ ("html "). unbind ("mousemove", dialog_mousemove );});});

The above js Code achieves the drag effect of the dialog box. First, you can drag the mouse only when you press the mouse in the title area of the dialog box. Then, when you move the mouse, you can calculate and change the container position in real time. Finally, if you press the mouse button to release the mouse movement event, clear the mouse movement event.

Click the button to call back

Most of the time, we need to execute a callback when we click OK or cancel (for example, "Are you sure you want to delete ).

When you click OK, the dialog box is automatically closed and you can perform the operations you need. Yes. Some people may say that you are a zombie dialog box, And all html code needs to be directly encoded. Yes, this is just a simple way of thinking. Let's sort it out.

:

All Code: (of course, this is just a simple implementation. There are still a lot of effects that need to be further refined, such as: Background mask, if you click multiple dialog boxes)

<! DOCTYPE html> 
Message Box
Requirements: Automatically closes message boxes and classifies messages (such as warnings, errors, and successes) at regular intervals)
Draw a simple model box
<Div class = "hi-message-box">  <span class = "hi-message-messg"> you don't love me anymore ~~ </Span> </div>
Add basic style
<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>
:

Does it look very simple? Next we will add the timed message disabling function to it.
It's so easy to shut down messages on a regular basis. I also want to write complicated ones .)Copy codeThe Code is as follows: setTimeout (function () {$ ("div. hi-message-box"). fadeOut ("slow") ;}, 1200 );

:

Add the Message Type (in fact, add different images based on parameters)
setTimeout(function () {      $("div.hi-message-box").fadeOut("slow");}, 1200);
:

Is it more like this?
As shown above, we also need to sort out the implementation code:

:

All Code: (similarly, the message box is simply implemented. There are still too many questions to consider, such as (parameter locating of the message box, setting the timed close time, and sending multiple message boxes ))
<! DOCTYPE html> 
Demo address: Dialog Box demonstration Address message box demo address
The above is a full description of the front-end dialog box and Message Box Based on. Net. I hope it will be helpful to you. If you want to learn more, please stay tuned to the help house!