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.