Js is compatible with pc-side browsers and has a variety of cell phone floating-Layer Control instances with pop-up tips, jspc

Js is compatible with pc-side browsers and has a variety of cell phone floating-Layer Control instances with pop-up tips, jspc

The example in this article describes how js is compatible with pc-side browsers and there are a variety of floating-layer controls for mobile phones that bring up tips. Share it with you for your reference. The details are as follows:

Click here to download the complete instance code.

Usage

<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:

<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:

<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:

$ ('# Btn_alert '). click (function () {$. alert ('select the item to upload the clip. ', true, function () {alert ('You clicked OK')}); $ ('# btn_alert2 '). click (function () {$. alert ('select the item to upload the clip. ')}); $ (' # 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:
Close html (default: <span class = "ui-dialog-close js-dialog-close"> x </span>)
 
TitleTpl:
Title html (default: <div class = "ui-dialog-title"> </div>)
 
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.