jQuery Dialog dialog box event usage example analysis_jquery

the example in this article describes the usage of jquery dialog dialog box events. share it with everyone for your reference, the details are as follows:

dialog dialog event

dialog application scenarios

the dialog box is the most commonly used and practical function.

1) static prompt dialog box, the content of the dialog box is fixed
2) dynamic prompt dialog box, the content of the dialog box changes according to the event source
3) mask dialog box, when the dialog box pops up, the background turns gray and is not selectable

you can easily achieve the above three effects using jquery ui's dialog component

the main features of the dialog component are that it can be dragged (draggable) and resized (resizable).

the use of the dialog dialog box is also very simple. after selecting an element, you can use ".dialog()" on the element to turn it into a dialog box, and modify each element of the dialog box by passing various options attribute classes. kind of behavior.

usually a dialog box is a div element:

<div id="divtip" title="自定义标题">
  <p>弹出层</p>
</div>

the following statement will generate a dialog box using the default options attribute.

jquery("#divtip").dialog();

after executing the above statement, the div element becomes a draggable and stretchable dialog box.

of course this is just the simplest application. let's use a complete example to quickly get started with the dialog box component.

use dialog control to implement three specific pop-up boxes.

one is a static pop-up layer, that is, the content of the pop-up layer is fixed.

one is a dynamic pop-up layer, that is, the content of the pop-up layer varies according to the triggerer of the event.

the other is a common mask pop-up layer, that is, after the pop-up layer is displayed, elements on the page other than the pop-up layer cannot be operated.

first take a look at the html snippets of several elements on the page.

<!—demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>demo.共享同一个静态弹出层，弹出层内容固定：</h3>
  <div>
   <spanid="spanshowtip1">显示提示</span>  <span id="spanshowtip2">显示提示</span>  
   <spanid="spanshowtip3">显示提示</span>   <span id="spanshowtip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3>demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>
  <div>
   <spanid="spanshowdatatip1" data="颜色是红色">红色</span>     
<span id="spanshowdatatip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>demo.弹出iframe</h3>
  <div>
   <inputtype="button" id="bunshowiframe" name=" bunshowiframe" value="显示弹出层" />
  </div>
</div>

the element displayed on the element page is used to trigger the event of displaying the popup layer.

the html code of the pop-up layer is as follows:

<!—提示类弹出层—>
<div id="divtip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="diviframe" title="iframe 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

the pop-up layer is a div element. it will be shown or hidden as needed.

with the html elements ready, the next step is to apply the jquery ui dialog control. first, in initializedom, get the page elements that need to be manipulated later.

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

readers who are interested in more jquery related content can check out the special topics on this site: "jquery switching special effects and techniques summary", "jquery drag effects and techniques summary", "jquery extension skills summary", "jquery common classic special effects summary", "jquery animation and special effects usage summary", "jquery selector usage summary 》and《jquery common plug-ins and usage summary》

i hope this article will be helpful to everyone in jquery programming.