### Checkbox Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates the styling and functionality of checkboxes in WeUI, including disabled states. ```html
添加更多
``` -------------------------------- ### Info Icon Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Displays an info icon with a title and description. Used for informational messages. ```html

图片上传，缩略图不带删除

3/10
``` -------------------------------- ### Loadmore Component Examples Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates different states of the loadmore component, including 'no data' and 'end of data'. ```html
暂无数据
已无更多数据
``` -------------------------------- ### Switch Component Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates the implementation of a switch component with different states, including disabled and a custom styled version for IE Edge compatibility. ```html ``` -------------------------------- ### Show Dialog Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Handles the display and hiding of a dialog box, including focus management for accessibility. ```javascript mate'); $agreeMsg.hide(); }, 200); } }); $('#dialogs').on('click', '.weui-mask', function(){ $halfScreenDialog.removeClass('weui-half-screen-dialog_show'); $(this).parents('.js_dialog').fadeOut(200); $iosDialog1.attr('aria-modal','false'); $('#showIOSDialog1').attr('tabindex','-1').trigger('focus'); }); $('#dialogClose').on('click', function(){ $halfScreenDialog.removeClass('weui-half-screen-dialog_show'); $(this).parents('.js_dialog').fadeOut(200); $iosDialog1.attr('aria-modal','false'); $('#showIOSDialog1').attr('tabindex','-1').trigger('focus'); }); $('#showIOSDialog1').on('click', function(){ $iosDialog1.fadeIn(200); $halfScreenDialog.addClass('weui-half-screen-dialog_show'); $iosDialog1.attr('aria-modal','true'); setTimeout(function () { $('#dialogClose').trigger('focus'); }, 500); }); ``` -------------------------------- ### Radio Button Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Illustrates the visual appearance and selection behavior of radio buttons in WeUI. ```html
``` -------------------------------- ### Success Icon Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Displays a success icon with a title and description. Used to indicate successful operations. ```html
``` -------------------------------- ### Progress Bar Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates a progress bar with upload functionality. The progress increases over time, and the upload button is disabled during the process. ```javascript js_line.style.height = 4 + 'px'; js_line.style.borderRadius = 2 + 'px'; js_arrow.style.opacity = 0; } }) dialog_5.addEventListener('touchend', function (e) { var move = e.changedTouches[0].clientY - start; end = move; var max = 56; dialog_5.style.transition = 'transform .3s'; if(end < max){ dialog_5.style.transform = 'translate3d(0,0,0)'; js_line.style.height = 4 + 'px'; js_line.style.borderRadius = 2 + 'px'; js_arrow.style.opacity = 0; end = 0; } else if(end >= max){ closeDialog($(this)); dialog_5.style.transform = 'translate3d(0,100%,0)'; } }) $(function(){ var $progress = $('.js_progress'), $btnUpload = $('#btnUpload'); var progress = 0; var $current = $('#js_current'); var currentDate = +new Date(); window.test=$current; function next() { if(progress > 10){ if (+new Date() - currentDate > 3000) { $current.text('已上传百分之' + progress); currentDate = +new Date() } } if(progress === 100){ $current.text('已上传百分之' + progress); progress = 0; $btnUpload.removeClass('weui-btn_disabled'); return; } $progress.css({width: progress + '%'}); progress = ++progress; setTimeout(next, 20); } $btnUpload.on('click', function(){ if ($btnUpload.hasClass('weui-btn_disabled')) return; $btnUpload.addClass('weui-btn_disabled'); next(); }); }); ``` -------------------------------- ### Basic Cell Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html A simple cell with an icon, title, and optional description. Used for list items. ```html
``` -------------------------------- ### Show Date Picker Source: https://github.com/tencent/weui/blob/master/src/example/form/form_select_primary.html Initializes a multi-column date picker allowing users to select a date within a specified range. The picker supports `onChange` and `onConfirm` callbacks and can be configured with start and end years. ```javascript $('#showDatePicker').on('click', function () { weui.datePicker({ start: 1990, end: new Date().getFullYear(), onChange: function (result) { console.log(result); }, onConfirm: function (result) { console.log(result); }, title: '多列选择器'}); }); ``` -------------------------------- ### Native Select Box Examples Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Showcases different styles of native select boxes, including a basic select, a select with a prefix for country codes, and a select with a label and input field. ```html
``` -------------------------------- ### Native Select Box Example Source: https://github.com/tencent/weui/blob/master/src/example/form/form_select.html Demonstrates a native HTML select box with options for country codes and country names. This is a standard HTML element for user selection. ```HTML +86 +80 +84 +87 ``` ```HTML 中国 美国 英国 ``` -------------------------------- ### Toast Notification Example Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Triggers a toast notification with a success icon and message, which automatically disappears after a delay. ```javascript var $tooltips = $('.js_tooltips'); var $toast = $('#js_toast'); $('#showTooltips').on('click', function(){ // toptips的fixed, 如果有`animation`, `position: fixed`不生效 $('.page.cell').removeClass('slideIn'); $toast.fadeIn(100); $toast.attr('aria-live','assertive'); setTimeout(function () { $toast.fadeOut(100); $toast.attr('aria-live','off'); }, 2000); }); ``` -------------------------------- ### Show Ticket Type Picker Source: https://github.com/tencent/weui/blob/master/src/example/form/form_select_primary.html Displays a single-column picker for selecting ticket types. This example includes a disabled option to demonstrate how to handle unavailable choices. Event handlers for `onChange` and `onConfirm` are provided. ```javascript $('#showPicker').on('click', function () { weui.picker([{"label": "飞机票", "value": 0}, {"label": "火车票", "value": 1}, {"label": "的士票", "value": 2},{"label": "公交票 (disabled)", "disabled": true, "value": 3}, {"label": "其他", "value": 4}], {onChange: function (result) { console.log(result); }, onConfirm: function (result) { console.log(result); }, title: '单列选择器'}); }); ``` -------------------------------- ### Get User Configuration in WeChat Source: https://github.com/tencent/weui/blob/master/dist/example/index.html This snippet uses the wxReady utility to invoke WeixinJSBridge.invoke('getUserConfig') and sets a data attribute on the body if the user is in 'care mode'. ```javascript wxReady(function() { WeixinJSBridge.invoke('getUserConfig', {}, function(res) { if (res.isCareMode) { document.body.setAttribute('data-weui-mode','care'); } }); }); ``` -------------------------------- ### Grey Search Bar Initialization and Event Handling Source: https://github.com/tencent/weui/blob/master/src/example/searchbar/searchbar_grey.html Initializes the grey search bar component and sets up event listeners for user interactions like focusing, input changes, clearing, and canceling the search. Use this script to enable the interactive features of the search bar. ```javascript $(function(){ var $searchBar = $('#searchBar'), $searchText = $('#searchText'), $searchBox = $('#searchBox'), $searchInput = $('#searchInput'), $searchClear = $('#searchClear'), $searchForm = $('#searchForm'), $searchCancel = $('#searchCancel'); function cancelSearch(){ $searchBar.removeClass('weui-search-bar\_focusing'); $searchText.attr('aria-hidden','false').show(); $searchBox.attr('aria-hidden','true'); } $searchText.on('click', function(){ $searchBar.addClass('weui-search-bar\_focusing'); $searchText.attr('aria-hidden','true'); $searchBox.attr('aria-hidden','false'); $searchInput.focus(); }); $searchInput .on('blur', function () { if(!this.value.length) cancelSearch(); }) .on('input', function(){ if(this.value.length) { $searchForm.attr('aria-expanded','true'); } else { $searchForm.attr('aria-expanded','false'); } }) ; $searchClear.on('click', function(){ $searchInput.focus(); $searchInput.val(''); }); $searchCancel.on('click', function(){ cancelSearch(); $searchInput.blur(); }); }); ``` -------------------------------- ### Initialize WeUI and Handle WeChat Ready Event Source: https://github.com/tencent/weui/blob/master/src/example/index.html This JavaScript code initializes WeUI and provides a utility function `wxReady` to ensure WeChat APIs are available before executing a callback. It's useful for integrating with WeChat's features. ```javascript //WAH.default.init() function wxReady(callback) { if ( typeof WeixinJSBridge === 'object' && typeof window.WeixinJSBridge.invoke === 'function' ) { callback() } else { document.addEventListener('WeixinJSBridgeReady', callback, false) } } wxReady(function() { WeixinJSBridge.invoke('getUserConfig', {}, function(res) { if (res.isCareMode) { document.body.setAttribute('data-weui-mode','care'); } }); }); ``` -------------------------------- ### Text Area Input Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Provides an example of a standard text area input field with a character counter. This is suitable for collecting longer text input from users. ```html
问题描述
0/200
``` -------------------------------- ### Initialize and Close Half Screen Dialogs Source: https://github.com/tencent/weui/blob/master/src/example/half-screen-dialog/half-screen-dialog.html Initializes multiple dialog elements and defines a reusable function to close them. Use this for standard dialog management. ```javascript $(function(){ const $dialog1 = $('#js_dialog_1'); const $dialog2 = $('#js_dialog_2'); const $dialog3 = $('#js_dialog_3'); const $dialog4 = $('#js_dialog_4'); const $dialog5 = $('#js_dialog_5'); const $dialogWrap1 = $('#dialogWrap1'); const $dialogWrap2 = $('#dialogWrap2'); const $dialogWrap3 = $('#dialogWrap3'); const $dialogWrap4 = $('#dialogWrap4'); const $dialogWrap5 = $('#dialogWrap5'); function closeDialog(o){ const $jsDialogWrap = o.parents('.js_dialog_wrap'); $jsDialogWrap.attr('aria-hidden','true').attr('aria-modal','false').removeAttr('tabindex'); $jsDialogWrap.fadeOut(300); $jsDialogWrap.find('.js_dialog').removeClass('weui-half-screen-dialog_show'); setTimeout(function(){ $('#' + $jsDialogWrap.attr('ref')).trigger('focus'); }, 300); } // Prevent dialog internal scroll from bubbling up $('.js_dialog_wrap').on('touchmove', function(e) { if($.contains(document.getElementById('js_wrap_content'), e.target)){ } else { e.preventDefault(); } }); $('.js_close').on('click', function() { closeDialog($(this)); }); }); ``` -------------------------------- ### Single Column Picker Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates how to use the weui.picker function to create a single column selection interface. This is useful for selecting items from a predefined list. ```javascript weui.picker([{ label: '+86', value: 0 }, { label: '+80', value: 1 }, { label: '+84', value: 2 }, { label: '+87', value: 3 }], { onChange: function (result) { console.log(result); }, onConfirm: function (result) { console.log(result); }, title: '单列选择器' }); ``` -------------------------------- ### Date Picker Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates the use of weui.datePicker to create a multi-column date selection interface. It allows users to select a date within a specified range. ```javascript weui.datePicker({ start: 1990, end: new Date().getFullYear(), onChange: function (result) { console.log(result); }, onConfirm: function (result) { console.log(result); }, title: '多列选择器' }); ``` -------------------------------- ### Uploader JavaScript Initialization Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Initializes the uploader component and sets up event handlers for file changes and image deletion. ```javascript var tmpl = ''; var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"); var $galleryOpr = $("#galleryOpr"), $galleryImgOpr = $("#galleryImgOpr"), $galleryDel = $("#galleryDel"); var $uploaderInput = $("#uploaderInput"), $uploaderFiles = $("#uploaderFiles"); var currentImg; $uploaderInput.on("change", function(e){ var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; for (var i = 0; i < files.length; ++i) { var file = files[i]; if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') { alert('请选择图片文件'); return; } src = $("#uploaderFiles").children("li").length; if(src > 9) { alert('最多只能上传9张图片'); return; } var img = window.document.createElement('img'); img.onload = function(){ var valid = false; if (this.width > 100 && this.height > 100) { valid = true; } if (!valid) { alert('上传图片尺寸最小100x100'); img = null; } }; img.src = url.createObjectURL(file); if(img){ var html = tmpl.replace('#url#', img.src); $uploaderFiles.append(html); url.revokeObjectURL(file); } } }); $uploaderFiles.on("click", "li", function(){ var $this = $(this); if($this.hasClass('weui-uploader__file_status')){ return; } currentImg = $this; // $gallery.show(); // $galleryImg.attr("style", $this.find("span").attr("style")); $galleryOpr.show(); $galleryImgOpr.attr("style", $this.attr("style")); }); $galleryDel.on("click", function(){ currentImg.remove(); $galleryOpr.hide(); // $gallery.hide(); }); $("#galleryCancel").on("click", function(){ $gallery.hide(); }); $("#galleryOprCancel").on("click", function(){ $galleryOpr.hide(); }); // delete in preview uploader var tmpl2 = '
    • '; var $uploaderInput2 = $("#uploaderInputWithDelete"), $uploaderFiles2 = $("#uploaderFilesWithDelete"); $uploaderInput2.on("change", function(e){ var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; for (var i = 0; i < files.length; ++i) { var file = files[i]; if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') { alert('请选择图片文件'); return; } src = $("#uploaderFilesWithDelete").children("li").length; if(src > 9) { alert('最多只能上传9张图片'); return; } var img = window.document.createElement('img'); img.onload = function(){ var valid = false; if (this.width > 100 && this.height > 100) { valid = true; } if (!valid) { alert('上传图片尺寸最小100x100'); img = null; } }; img.src = url.createObjectURL(file); if(img){ var html = tmpl2.replace('#url#', img.src); $uploaderFiles2.append(html); url.revokeObjectURL(file); } } }); $uploaderFiles2.on("click", ".weui-uploader__file__delete", function(){ $(this).parents(".weui-uploader__file").remove(); }); $uploaderFiles2.on("click", ".weui-uploader__file__thumb", function(){ var $this = $(this); if($this.hasClass('weui-uploader__file_status')){ return; } currentImg = $this; // $gallery.show(); // $galleryImg.attr("style", $this.attr("style")); $galleryOpr.show(); $galleryImgOpr.attr("style", $this.attr("style")); }); $("#galleryOprCancel").on("click", function(){ $galleryOpr.hide(); }); $(function(){ // delete in preview uploader var tmpl = ''; var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"); var $galleryOpr = $("#galleryOpr"), $galleryImgOpr = $("#galleryImgOpr"), $galleryDel = $("#galleryDel"); var $uploaderInput = $("#uploaderInput"), $uploaderFiles = $("#uploaderFiles"); var currentImg; $uploaderInput.on("change", function(e){ var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; for (var i = 0; i < files.length; ++i) { var file = files[i]; if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') { alert('请选择图片文件'); return; } src = $("#uploaderFiles").children("li").length; if(src > 9) { alert('最多只能上传9张图片'); return; } var img = window.document.createElement('img'); img.onload = function(){ var valid = false; if (this.width > 100 && this.height > 100) { valid = true; } if (!valid) { alert('上传图片尺寸最小100x100'); img = null; } }; img.src = url.createObjectURL(file); if(img){ var html = tmpl.replace('#url#', img.src); $uploaderFiles.append(html); url.revokeObjectURL(file); } } }); $uploaderFiles.on("click", "li", function(){ var $this = $(this); if($this.hasClass('weui-uploader__file_status')){ return; } currentImg = $this; // $gallery.show(); // $galleryImg.attr("style", $this.find("span").attr("style")); $galleryOpr.show(); $galleryImgOpr.attr("style", $this.attr("style")); }); $galleryDel.on("click", function(){ currentImg.remove(); $galleryOpr.hide(); // $gallery.hide(); }); $("#galleryCancel").on("click", function(){ $gallery.hide(); }); $("#galleryOprCancel").on("click", function(){ $galleryOpr.hide(); }); }); ``` -------------------------------- ### Initialize and Show Half-Screen Dialogs Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Initializes and displays multiple half-screen dialogs using jQuery. Ensures proper ARIA attributes and focus management for accessibility. Use this for standard dialog interactions. ```javascript $(function(){ const $dialog1 = $('#js_dialog_1'); const $dialog2 = $('#js_dialog_2'); const $dialog3 = $('#js_dialog_3'); const $dialog4 = $('#js_dialog_4'); const $dialog5 = $('#js_dialog_5'); const $dialogWrap1 = $('#dialogWrap1'); const $dialogWrap2 = $('#dialogWrap2'); const $dialogWrap3 = $('#dialogWrap3'); const $dialogWrap4 = $('#dialogWrap4'); const $dialogWrap5 = $('#dialogWrap5'); function closeDialog(o){ const $jsDialogWrap = o.parents('.js_dialog_wrap'); $jsDialogWrap.attr('aria-hidden','true').attr('aria-modal','false').removeAttr('tabindex'); $jsDialogWrap.fadeOut(300); $jsDialogWrap.find('.js_dialog').removeClass('weui-half-screen-dialog_show'); setTimeout(function(){ $('#' + $jsDialogWrap.attr('ref')).trigger('focus'); }, 300); } // 阻止弹窗内部滚动冒泡 $('.js_dialog_wrap').on('touchmove', function(e) { if($.contains(document.getElementById('js_wrap_content'), e.target)){ } else { e.preventDefault(); } }); $('.js_close').on('click', function() { closeDialog($(this)); }); $('#showDialog1').on('click', function(){ $dialogWrap1.fadeIn(200); $dialog1.addClass('weui-half-screen-dialog_show'); setTimeout(function(){ $dialogWrap1.attr('aria-hidden','false'); $dialogWrap1.attr('aria-modal','true'); $dialogWrap1.attr('tabindex','0'); $dialogWrap1.trigger('focus'); },200) }); $('#showDialog2').on('click', function(){ $dialogWrap2.fadeIn(200); $dialog2.addClass('weui-half-screen-dialog_show'); // wrapPage.style.visibility = 'hidden'; setTimeout(function(){ if(wrapBtn.offsetHeight > 48){ wrapPage.classList.add('weui-half-screen-dialog_btn-wrap'); } // wrapPage.style.visibility = 'visible'; },100); setTimeout(function(){ $dialogWrap2.attr('aria-hidden','false'); $dialogWrap2.attr('aria-modal','true'); $dialogWrap2.attr('tabindex','0'); $dialogWrap2.trigger('focus'); },200) }); $('#showDialog3').on('click', function(){ $dialogWrap3.attr('aria-hidden','false'); $dialogWrap3.attr('aria-modal','true'); $dialogWrap3.attr('tabindex','0'); $dialogWrap3.fadeIn(200); $dialog3.addClass('weui-half-screen-dialog_show'); setTimeout(function(){ $dialogWrap3.trigger('focus'); },200) }); $('#showDialog4').on('click', function(){ $dialogWrap4.attr('aria-hidden','false'); $dialogWrap4.attr('aria-modal','true'); $dialogWrap4.attr('tabindex','0'); $dialogWrap4.fadeIn(200); $dialog4.addClass('weui-half-screen-dialog_show'); wrapArea.style.visibility = 'hidden'; setTimeout(function(){ if(wrapBtn1.offsetHeight > 48){ $dialog4.addClass('weui-half-screen-dialog_btn-wrap'); } wrapArea.style.visibility = 'visible'; },100); setTimeout(function(){ $dialogWrap4.trigger('focus'); },200) }); $('#showDialog5').on('click', function(){ $dialogWrap5.fadeIn(200); js_line.style.height = 4 + 'px'; js_line.style.borderRadius = 2 + 'px'; js_arrow.style.opacity = 0; $dialog5.addClass('weui-half-screen-dialog_show'); $dialog5.css('transform','translate3d(0, 0, 0)'); setTimeout(function(){ $dialogWrap5.attr('aria-hidden','false'); $dialogWrap5.attr('aria-modal','true'); $dialogWrap5.attr('tabindex','0'); $dialogWrap5.trigger('focus'); },200) }); $('#js_close').on('click', function(){ closeDialog($(this)); $dialog5.css('transform','translate3d(0, 100%, 0)'); }); var dialog_5 = document.getElementById('js_dialog_5'); var js_line = document.getElementById('js_line'); var js_arrow = document.getElementById('js_arrow'); var start = 0 var end = 0 dialog_5.addEventListener('touchstart', function (e) { start = e.changedTouches[0].clientY; }) dialog_5.addEventListener('touchmove', function (e) { var move = e.changedTouches[0].clientY - start; if(move > 0){ dialog_5.style.transform = 'translate3d(0, ' + move + 'px, 0)'; var percent = move / 56; percent = percent > 1 ? 1 : percent; js_line.style.height = 4 + (16 - 4) * percent + 'px'; js_line.style.borderRadius = 2 + (12 - 2) * percent + 'px'; if(percent >= 0.5){ var pear = (percent - 0.5) / 0.5; js_arrow.style.opacity = pear; } } else { dialog_5.style.transform = 'translate3d(0,0,0)'; } }); }); ``` -------------------------------- ### Input Fields Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Demonstrates various input fields including number, tel, date, and datetime-local types. Includes placeholders and patterns for input validation. ```HTML
    ``` -------------------------------- ### Toast Initialization Script Source: https://github.com/tencent/weui/blob/master/dist/example/index.html This JavaScript code initializes the toast component. It selects the toast element and attaches an event listener to show it when a specific button is clicked. ```javascript var $toast = $('#toast'); $('#showToast').o ``` -------------------------------- ### WeUI List with Description Source: https://github.com/tencent/weui/blob/master/dist/example/index.html A basic list item structure with primary text and a descriptive footer. ```html
    带说明的列表项

    标题文字

    说明文字
    ``` -------------------------------- ### Form Preview Component Source: https://github.com/tencent/weui/blob/master/dist/example/index.html Displays a structured form preview with a header and body sections. Includes labels and values for different form fields. ```html

    Preview

    表单预览

    ¥2400.00
    电动打蛋机
    名字名字名字
    很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字
    操作

    ¥2400.00
    电动打蛋机
    名字名字名字
    很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字
    ``` -------------------------------- ### WeChat Ready Callback Source: https://github.com/tencent/weui/blob/master/src/example/half-screen-dialog/half-screen-dialog.html Provides a utility function to execute a callback once the WeChat JSAPI is ready. Use this to ensure WeChat-specific functionalities are available before execution. ```javascript function wxReady(callback) { if ( typeof WeixinJSBridge ``` -------------------------------- ### Show Half Screen Dialog 2 with Button Wrap Logic Source: https://github.com/tencent/weui/blob/master/src/example/half-screen-dialog/half-screen-dialog.html Opens the second dialog and conditionally applies a class based on button wrap height. Use this to adjust layout for dialogs with prominent action buttons. ```javascript $('#showDialog2').on('click', function(){ $dialogWrap2.fadeIn(200); $dialog2.addClass('weui-half-screen-dialog_show'); // wrapPage.style.visibility = 'hidden'; setTimeout(function(){ if(wrapBtn.offsetHeight > 48){ wrapPage.classList.add('weui-half-screen-dialog_btn-wrap'); } // wrapPage.style.visibility = 'visible'; },100); setTimeout(function(){ $dialogWrap2.attr('aria-hidden','false'); $dialogWrap2.attr('aria-modal','true'); $dialogWrap2.attr('tabindex','0'); $dialogWrap2.trigger('focus'); },200) }); ```