Cool jquery Custom Dialog Plugin jdialog_jdialog Popup dialog box and confirmation dialog plugin
Last Update:2016-05-29
Source: Internet
Author: User
<span id="Label3"></p><p><p>Multiple types of custom dialog Plug-ins JDialog is a lightweight, multi-type custom dialog box plugin based on jquery</p></p><p><p>In the project development, generally will beautify alert (); style, so today I would like to share with you a very cool plugin</p></p><p><p>Let's take a look at the final piece of the Program.</p></p><p><p></p></p><p><p>Here is the HTML code</p></p><p><p></p></p><pre class="prettyprint lang-js prettyprinted"><span class="pun"><<span class="pln">Center<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Button ID<span class="pun">=<span class="str">"test1"<span class="pun">><span class="pln">Alert<span class="pun">Method call </<span class="pln">button<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Br<span class="pun">/><<span class="pln">Br<span class="pun">/><span class="pln"><span class="pun"><<span class="pln">Button ID<span class="pun">=<span class="str">"test2"<span class="pun">><span class="pln">Confirm<span class="pun">Method call </<span class="pln">button<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Br<span class="pun">/><<span class="pln">Br<span class="pun">/><span class="pln"><span class="pun"><<span class="pln">Button ID<span class="pun">=<span class="str">"test3"<span class="pun">><span class="pln">Iframe<span class="pun">Method call </<span class="pln">button<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Br<span class="pun">/><<span class="pln">Br<span class="pun">/><span class="pln"><span class="pun"><<span class="pln">Button ID<span class="pun">=<span class="str">"test4"<span class="pun">> Show Content dialog box only </<span class="pln">button<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Br<span class="pun">/><<span class="pln">Br<span class="pun">/><span class="pln"><span class="pun"><<span class="pln">Button ID<span class="pun">=<span class="str">"test5"<span class="pun">> Dialog box Configuration button </<span class="pln">button<span class="pun">><span class="pln"><span class="pun"><<span class="pln">Br<span class="pun"><span class="pun">/><<span class="pln">br<span class="pun">/><span class="pln"><span class="pun">< <span class="pln">button id<span class="pun">=<span class="str"> "test6" <span class="pun">><span class="pun" message<span> mode call </<span class="pln">button<span class="pun">><span class="pun" <span><<span class="pln">br<span class="pun">/><<span class="pln">br<span class="pun">/ ><span class="pln"><span class="pun"><<span class="pln">button id<span class="pun">=<span class="str"> " Test7 "<span class=" pun ">><span class=" PLN ">tip<span class=" pun "> Way Call </<span class=" PLN ">button <span class="pun">><span class="pln"><span class="pun"></<span class="pln">center<span class="pun">> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre><p><p>Here is the JS code</p></p><p><p></p></p><p><p></p></p><pre class="prettyprint lang-js prettyprinted"><span class="pln">$<span class="pun">(<span class="str">"#test1"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Alert<span class="pun">(´ Welcome to use<span class="pln">JDialog<span class="pun">component, I was<span class="pln">Alert<span class="pun">！ ´,{},{<span class="pln">Showshadow<span class="pun">:<span class="pln"> <span class="kwd">False<span class="pun">,<span class="com">Do not display dialog box shadows<span class="pln">Buttonalign<span class="pun">:<span class="pln"> <span class="pun">´<span class="pln">Center<span class="pun">´,<span class="pln">Events<span class="pun">:<span class="pln"> <span class="pun">{<span class="pln">Show<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">Evt<span class="pun">){<span class="pln"><span class="kwd">Var<span class="pln">Dlg<span class="pun">=<span class="pln">Evt<span class="pun">.<span class="pln">Data<span class="pun">.<span class="pln">Dialog<span class="pun">;<span class="pln"><span class="pun">},<span class="pln">Close<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">Evt<span class="pun">){<span class="pln"><span class="kwd">Var<span class="pln">Dlg<span class="pun">=<span class="pln">Evt<span class="pun">.<span class="pln">Data<span class="pun">.<span class="pln">Dialog<span class="pun">;<span class="pln"><span class="pun">},<span class="pln">Enterkey<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">Evt<span class="pun">){<span class="pln">Alert<span class="pun">(´<span class="pln">Enter key pressed<span class="pun">!´);<span class="pln"><span class="pun">},<span class="pln">Esckey<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">Evt<span class="pun">){<span class="pln">Alert<span class="pun">(´<span class="pln">ESC key pressed<span class="pun">!´);<span class="pln">Evt<span class="pun">.<span class="pln">Data<span class="pun">.<span class="pln">Dialog<span class="pun">.<span class="pln">Close<span class="pun">();<span class="pln"><span class="pun">}<span class="pln"><span class="pun">}<span class="pln"> <span class="pun">});<span class="pln"><span class="pun">})<span class="pln"> <span class="pun">;<span class="pln">$<span class="pun">(<span class="str">"#test2"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Confirm<span class="pun">(´ Welcome to use<span class="pln">JDialog<span class="pun">component, I was<span class="pln">Confirm<span class="pun">！ ´,{<span class="pln">Handler<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">button<span class="pun">,<span class="pln">Dialog<span class="pun">)<span class="pln"> <span class="pun">{<span class="pln">Alert<span class="pun">(´ you clicked Ok!) ´);<span class="pln">Dialog<span class="pun">.<span class="pln">Close<span class="pun">();<span class="pln"><span class="pun">}<span class="pln"><span class="pun">},{<span class="pln">Handler<span class="pun">:<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">button<span class="pun">,<span class="pln">Dialog<span class="pun">)<span class="pln"> <span class="pun">{<span class="pln">Alert<span class="pun">(´ you clicked the Cancel!) ´);<span class="pln">Dialog<span class="pun">.<span class="pln">Close<span class="pun">();<span class="pln"><span class="pun">}<span class="pln"><span class="pun">});<span class="pln"><span class="pun">});<span class="pln">$<span class="pun">(<span class="str">"#test3"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="com">Control the IFRAME dialog box with the options parameter<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Iframe<span class="pun">(´<span class="pln">http<span class="pun">:<span class="com">dwtedx.com/´,{<span class="pln">Title<span class="pun">:<span class="pln"> <span class="pun">´ Code Editor<span class="pln"> <span class="pun">-<span class="pln">Dwtedx<span class="pun">Personal blog ´,<span class="pln">Width<span class="pun">:<span class="pln"> <span class="lit">1100<span class="pun">,<span class="pln">Height<span class="pun">:<span class="pln"> <span class="lit">550<span class="pln"><span class="pun">});<span class="pln"><span class="pun">});<span class="pln">$<span class="pun">(<span class="str">"#test4"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="com">Control dialog with the options parameter<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Dialog<span class="pun">({<span class="pln">Title<span class="pun">:<span class="pln"> <span class="pun">´ Custom Dialog box ´,<span class="pln">Content<span class="pun">:<span class="pln"> <span class="pun">´, Welcome to visit Us.<span class="pln">Dwtedx<span class="pun">Personal Blog. ´<span class="pln"><span class="pun">});<span class="pln"><span class="pun">});<span class="pln">$<span class="pun">(<span class="str">"#test5"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="com">Control dialog with the options parameter<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Dialog<span class="pun">({<span class="pln">Title<span class="pun">:<span class="pln"> <span class="pun">´ Custom Dialog box ´,<span class="pln">Content<span class="pun">:<span class="pln"> <span class="pun">´ everyone, I am.<span class="pln">JDialog<span class="pun">.<span class="pln">Dialog<span class="pun">！ ´,<span class="pln">Buttons<span class="pun">:<span class="pln"> <span class="pun">[<span class="pln"><span class="pun">{<span class="pln">Type<span class="pun">:<span class="pln"> <span class="pun">´<span class="pln">Highlight<span class="pun">´,<span class="pln">Text<span class="pun">:<span class="pln"> <span class="pun">´ Hello ´,<span class="pln">Handler<span class="pun">:<span class="kwd">function<span class="pun">(<span class="pln">button<span class="pun">,<span class="pln">Dialog<span class="pun">)<span class="pln"><span class="pun">{<span class="pln">Dialog<span class="pun">.<span class="pln">Close<span class="pun">();<span class="pln"><span class="pun">}<span class="pln"><span class="pun">}<span class="pln"><span class="pun">]<span class="pln"><span class="pun">});<span class="pln"><span class="pun">});<span class="pln">$<span class="pun">(<span class="str">"#test6"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Message<span class="pun">(´ Hello everyone, Welcome to visit<span class="pln">Dwtedx<span class="pun">Personal blog ´,{<span class="pln">AutoClose<span class="pun">:<span class="pln"> <span class="lit">3000<span class="pun">,<span class="pln"> <span class="com">Auto-off after 3s<span class="pln">Padding<span class="pun">:<span class="pln"> <span class="pun">´<span class="lit">30px<span class="pun">´,<span class="pln"> <span class="com">Set internal padding<span class="pln">Modal<span class="pun">:<span class="pln"> <span class="kwd">True<span class="pln"> <span class="com">non-modal, i.e. no matte layer displayed<span class="pln"><span class="pun">});<span class="pln"><span class="pun">});<span class="pln">$<span class="pun">(<span class="str">"#test7"<span class="pun">).<span class="pln">Click<span class="pun">(<span class="kwd">function<span class="pun">(){<span class="pln"><span class="kwd">Var<span class="pln">Dialog<span class="pun">=<span class="pln">JDialog<span class="pun">.<span class="pln">Tip<span class="pun">(´ Hello everyone, Welcome to visit<span class="pln">Dwtedx<span class="pun">Personal blog ´,{<span class="pln">Target<span class="pun">:<span class="pln">$<span class="pun">(´#<span class="pln">Test7<span class="pun">´),<span class="pln">Position<span class="pun">:<span class="pln"> <span class="pun">´<span class="pln">Left<span class="pun">-<span class="pln"><span class="pln">top<span class="pun">´,<span class="pln">triangleposfromstart <span class="pun">: <span class="lit">0<span class="pun">,<span class="pln">autoclose <span class="pun">:<span class="pln"> <span class="lit">1000<span class="pun">,<span class="pln">offset <span class="pun">:<span class="pln"> <span class="pun">{ <span class="pln">top <span class="pun">:-< span class= "lit" >20<span class="pun">,<span class="pln">left <span class="pun">:<span class="lit">10<span class="pun">,<span class="pln">right<span class="pun">: <span class="lit">0<span class="pun">,<span class="pln">bottom<span class="pun">:<span class="lit">0 <span class="pln"><span class="pun">}<span class="pln"><span class="pun">}); <span class="pln"><span class="pun">}); </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre><p><p>of course, before you have to introduce the corresponding JS files and CSS files</p></p><p><p>Then the corresponding resource files I have been uploaded into the source code, you can directly download ha</p></p><p><p>Source code Download link: http://dwtedx.com/download.html?bdkey=s/1gdxgZh5 password: Lkpo</p></p><p><p>Cool jquery Custom Dialog Plugin jdialog_jdialog Popup dialog box and confirmation dialog plugin</p></p></span>
