This article describes the JS compatible PC-side browser and has a variety of pop-up tips for mobile phone-side floating-layer control. Share to everyone for your reference. Specifically as follows:
Full instance code click here to download the site.
Usage
<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:
<input type= "button" id= "Btn_dialogjquery value=" JQ open floating layer/> <div id= "DIALOG-CONTENTJQ"
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:
<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
" button " Id= "Btn_confirmdefault" value= "confirm Default"/>
Js:
$ (' #btn_alert '). Click (function () {
$.alert (' Select a good item 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: <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 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.