jQuery prompt effect code sharing_jquery-JS Tutorial-php.cn

jQuery prompt effect code sharing_jquery

WBOY

Release： 2016-05-16 16:30:55

Original

1466 people have browsed it

Code 1:

Copy code The code is as follows:

Copy code The code is as follows:

$(function(){

               $(".tooltip").mouseenter(function(e){

This.mytitle=this.title

This.title=""

              var a="" this.mytitle "
"

                  $("body").append(a);

                   $("div").css({

"top": (e.pageY y) "px",

"left": (e.pageX x) "px"

                   }).show("fast")

               }).mouseout(function(){

This.title= this.mytitle;

                   $("div").remove();

             });

})

Learning experience:

Do not append div elements under the p tag, as a large deviation will occur!

turn out to be! There is a difference between this and $("this"), if the above
Rewriting this.title to $("this").attr("title") will cause the following mouseout event to be unable to access the saved title

Code 2:

Quoting css: jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
Quoting js: jqueryui/js/jquery-ui-1.8.18.custom.min.js

Copy code The code is as follows:

<script><br>
$( "#dialog:ui-dialog" ).dialog( "destroy" );<br>
     <br>
$( "#dialog-message" ).dialog({<br>
                                    <br>
Height: 120,<br>
          width: 220,<br>
        modal: true,<br>
buttons: {<br>
"No": function() {<br>
                       //dosomething<br>
$ (This) .dialog ("close"); <br>
            },<br>
"Yes": function() {<br>
                       //dosomething<br>
$( this ).dialog( "close" );<br>
            }<br>
}<br>
});<br>
</script>
I am a pop-up message box

Code 3:

Use javascript popup layer component easyDialog

After using easyDialog for a period of time, we summarized some problems encountered during use. Recently, we spent some time to reconstruct and optimize the original code, and added some new functions. The original version was just to realize the basic functions of a simple pop-up layer. From a project perspective, it was about how to quickly complete the project. However, this version is not only about realizing the basic functions, but also considers how to make the pop-up layer better and more efficient. Easily applied to projects.
New features in easyDialog v2.0:

1. Added the default pop-up layer content template. If it is just some simple applications, you don’t need to write the structure of the pop-up layer content, but only need to pass a few simple parameters. The original usage method:

Copy code The code is as follows:

easyDialog.open({

container : 'demoBox'

});

Use the default content template, then the container parameter can be used like this:

Copy code The code is as follows:

easyDialog.open({

container : {

Header: 'Pop-up layer title',

Content: 'Welcome to easyDialog : )',

yesFn : btnFn,

NoFn: true

}

});

The displayed effect is as shown below:

If you want to modify the style of the default content template, you can modify the easydialog.css file in the downloaded document to achieve the style you want.
2. Added a drag-and-drop effect to make the pop-up layer have a better user experience, and the content of the pop-up layer can be customized to easily achieve the drag-and-drop effect.
3. A caching system and a micro-event processing system have been added internally, and the pop-up layer content has also been cached to make the pop-up layer perform better.
In addition, the naming of a parameter was modified. The original isOverlay was changed to overlay, and the ids of each element of the original pop-up layer were also renamed to avoid conflicts as much as possible.

The above 3 types of prompt effects are commonly used by me. You can use them freely according to your own project needs