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.