There is a dialog in jquery; the dialog is a UI component of the jQuery UI library. The advantage of using this component is that there is no need to refresh the web page, and a div layer can be popped up directly to allow the user to input information; when using this component, not only must it be introduced jquery, as well as js and related css files that introduce jQueryUI.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
Dialog is a UI component of the jQuery UI library, so when using dialog, you must not only introduce jQuery.js (because it is only a lightweight foundation Framework), you also need to introduce jQueryUI js and related css files
The advantage of using dialog is that there is no need to refresh the web page, and a div layer will pop up directly to allow the user to input information. It is also more convenient to use.
jquery ui-dialog is still widely used in web development. The most common example is the implementation of the login function.
The example is as follows:
The simplest implementation is to configure a dialog box in jquery's ready method. Such as:
$("#dialogDiv").dialog();But this does not meet our requirements, so we need to understand its common properties and methods. This is the configuration in my demo. As follows:
$("#dialogDiv").dialog({
autoOpen : false, // 是否自动弹出窗口
modal : true, // 设置为模态对话框
resizable : true,
width : 410, //弹出框宽度
height : 240, //弹出框高度
title : "用户登录", //弹出框标题
position : "center", //窗口显示的位置
buttons:{
'确定':function(){
//调用登录的方法
},
'取消':function(){
$(this).dialog("close");
}
}
});Note: "dialogDiv" represents the id of the element.
Commonly used attributes
autoOpen: When this attribute is true, the dialog window will be automatically opened when the dialog is called. When the attribute is false, the window is initially hidden, and the dialog window pops up when dialog("open") is called. Default: true.
position: the display position of the dialog: it can be 'center', 'left', 'right', 'top', 'bottom', it can also be the offset of top and left, or it can be one character String array such as ['right','top'].
title: The title of the dialog, empty by default.
modal: Whether to use a modal window. After the modal window is opened, other elements on the page will not be clickable until the modal window is closed. Defaults to false to not modal the window.
closeOnEscape: When true, click the ESC key on the keyboard to close the dialog. The default is true.
draggable: Whether draggable can be dragged using the title header. The default is true and draggable is possible.
resizable: whether resizable can change the size of the dialog. The default is true and the size can be changed.
Commonly used methods
open: open the dialog, one sentence $("#id").dialog("open").
close: Close the dialog, one sentence $("#id").dialog("close").
disable: Set the dialog to be unavailable.
enable: Set the dialog to be available.
isOpen: Determine whether the dialog is open. If it is open, return true.
destroy: Destroy the dialog.
moveToTop: Move the dialog to the top.
option: used to set and remove the value of the dialog. For example, we set the title for the dialog, code: $("#dialogDiv").dialog("option", "title", "Login")
Take a look at my demo, which simply calls the open method. You can try other methods yourself. For more attributes and methods, please go to the official website to see the API, address: http://api.jqueryui.com/dialog/. This is my login page. Calling method:
$("#dialogDiv").dialog("open");The effect is as shown:
This is the code of the page, as follows:
The above is the detailed content of Is there a dialog in jquery?. For more information, please follow other related articles on the PHP Chinese website!