js is compatible with the pc side browser and has a variety of floating layer control instances on the mobile side with pop up tips

This article describes the js floating layer control that is compatible with the pc side browser and has a variety of pop-up tips. Share to everybody for everybody reference. The details are as follows:

Click here to download the complete code.

usage

<input type="button" id="btn_dialog" value=" Open the supernatant "/>
<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:' The title '});
</script>

Or call it jquery:

<input type="button" id="btn_dialogjquery" value="jq Open the supernatant "/>
<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:' The title '})
</script>

Inherited classes alert and confirm prompt (in jquery mode) :

html:

<input type="button" id="btn_alert" value="alert"/>
<input type="button" id="btn_alert2" value="alert Timing closure "/>
<input type="button" id="btn_confirm" value="confirm3 Kind of button "/>
<input type="button" id="btn_confirmdefault" value="confirm The default "/>

js:

$('#btn_alert').click(function(){
  $.alert(' Select the product before uploading the material ',true,function(){
   alert(' You click on the ok')
  })
});
$('#btn_alert2').click(function(){
  $.alert(' Select the product before uploading the material ')
});
$('#btn_confirm').click(function(){
  $.confirm(' Download the entire  9  Send an image to your local album ?<div class="confirm-title2"> The text has been copied </div>',[{yes:" is "},{no:' no '},{close:' Shut down '}],function(type){
   $.alert(' You click the '+type);
   this.hide();
  });
})
$('#btn_confirmdefault').click(function(){
  $.confirm(' Are you sure you want to delete this message ? ',null,function(type){
   $.alert(' You click the '+type);
   this.hide();
  });
})

Property or method:

Properties:

trigger:
Triggered objects

target:
The pop-up contents can be #id or jquery objects

mask:
Whether there is a mask layer

title:
The 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 > )

Methods and callbacks:

show:
According to elastic layer

hide:
hidden

beforeShow: function (content)
Before displaying the method callback,content is a floating layer content object

beforeHide: function (content)
Hidden before the method callback,content is the floating layer content object

setPosition:function()
Set the position to center

I hope this article has been helpful for your javascript programming.