Js is compatible with pc-side browsers and has a variety of cell phone floating-layer controls that bring up tips

Js is compatible with pc-side browsers and has a variety of cell phone floating-layer controls that bring up tips

This article mainly introduces js compatible with pc-side browsers and a variety of floating-layer controls for mobile phone terminals that pop up tips. The example analyzes the implementation skills of various javascript pop-up layers, which is of great practical value, for more information, see

Click here to download the complete instance code.

Usage

?

1 2 3 4 5 6 7 8

<Input type = "button" id = "btn_dialog" value = "Open float layer"/> <Div id = "dialog-content" style = "display: none;"> This is the 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 use jquery to call:

?

1 2 3 4 5 6

<Input type = "button" id = "btn_dialogjquery" value = "jq open float 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>

Inheritance class alert and confirm prompts (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 Shutdown"/> <Input type = "button" id = "btn_confirm" value = "confirm three 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 the item to upload the clip. ', true, function (){ Alert ('You clicked OK ') }) }); $ ('# Btn_alert2'). click (function (){ $. Alert ('select a product to upload materials ') }); $ ('# Btn_confirm'). click (function (){ $. Confirm ('Download all nine images to the local album? <Div class = "confirm-title2"> text content copied </div> ', [{yes: "yes"}, {no: 'no'}, {close: 'shutdown '}], 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 '+ type ); This. hide (); }); })

Attribute or method:

Attribute:

Trigger:

Trigger object

Target:

The pop-up content can be # id or jquery object.

Mask:

Whether a mask layer exists

Title:

Title

ZIndex:

Z-index

CloseTpl:

Disable html (default: x)

TitleTpl:

Title html (default:

 

)

 

Method and callback:

Show:

Show bullet Layer

Hide:

Hide

BeforeShow: function (content)

Method callback before display. content is a floating layer content object.

BeforeHide: function (content)

Hide the previous method callback. content is the content Object of the floating layer.

SetPosition: function ()

Set Center

I hope this article will help you design javascript programs.