This article mainly introduces the JS-compatible PC-side browser and has a variety of pop-up tips of the mobile phone-side floating-layer control, example analysis of JavaScript a variety of pop-up effect of the implementation techniques, very practical value, the need for friends can refer to the
Full instance code click here to download the site.
Usage
?
1 2 3 4 5 6 7 8 |
<input type= "button" id= "Btn_dialog" value= "open floating layer"/> <div id= "dialog-content" style= "Display:none". > This is content </div> <script src= ". /src/jquery-1.9.1.min.js "></script> <script src=". /src/dialog.js "></script> <script> var Dialog = New dialog (); Dialog.init ({target: "#dialog-content", Trigger: "#btn_dialog", Mask:true,width:500,height:300,title: ' title '}); </script> |
or call it in jquery:
?
1 2 3 4 5 6 |
<input type= "button" id= "Btn_dialogjquery" value= "JQ open the Floating layer"/> <div id= "dialog-contentjq" style= "Display:none"; > This is the content 22</div> <script src= ". /src/dialog-jquery.js "></script> <script> $ (' #btn_dialogjquery '). Dialog ({target: "#dialog-contentjq", Mask:true,width:500,height:300,title: ' title '}) </script> |
Inheriting class alert and confirm hints (in jquery mode):
Html:
?
1 2 3 4 |
<input type= "button" id= "Btn_alert" value= "alert"/> <input type= "button" id= "Btn_alert2" value= "Alert timed off"/ > <input type= "button" id= "Btn_confirm" value= "confirm three kinds of buttons"/> <input type= "button" id= "Btn_confirmdefault "value=" Confirm default/> |
Js:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20 |
$ (' #btn_alert '). Click (function () {$.alert (' Select a good product to upload material oh ', true,function () {alert (' You clicked OK ')}}); $ (' #btn_alert2 '). Click (function () {$.alert (' Choose a good product to upload material Oh ')}); $ (' #btn_confirm '). Click (The function () {$.confirm (' Download all 9 pictures to the local album? <div class= ' confirm-title2 ' > Text content replicated </div > ', [{yes: ' is '},{no: ' No '},{close: ' Close '}],function (type) {$.alert (' you clicked ' +type); This.hide ();}); }) $ (' #btn_confirmdefault '). Click (function () {$.confirm (') are you sure you want to delete this message? ', null,function (type) {$.alert (' You clicked on ' +type '); This.hide (); }) |
Property or method:
Property:
Trigger
Trigger Object
Target
Pop-up content, can be #id, or jquery object
Mask
Is there a mask layer
Title
Title
ZIndex:
Z-index
CLOSETPL:
Turn off HTML (default: X)
TITLETPL:
Title HTML (default:
)
Method and callback:
Show
Show projectile layer
Hide
Hide
Beforeshow:function (content)
The method callback before the display, content is the floating Layer contents object
Beforehide:function (content)
Pre-hidden method callback, content is a floating layer contents object
Setposition:function ()
Set Position Center
I hope this article will help you with your JavaScript programming.