JS compatible PC-side browser with a variety of pop-up tips for mobile phone-side floating-layer control instances

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.