显示dialog框,点击页面其他地方dialog如何隐藏

显示dialog框,点击页面其他地方dialog如何隐藏

<h4 class="pull-left">子账号:<span>Join</span> <a class="selectothersubaccouts" href="javascript:;">选择其他子账号</a></h4>
37          <input type="hidden" name="current_uid" id="current_uid" value='join@pipapai.com' />
38          <div id="jobmanagerlist" class="popup" style="display:none; position:absolute;margin-left: 99px;margin-top: 26px;">
39             <div class="modal changeinterview_dialog feedback_dialog">
40                <div class="topsj"></div>
41                   <div class="modal-header clearfix">
42                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
43                     <a href="<?php echo OC_Helper::linkToRoute("company_subaccounts");?>" class="btn btn_feedback">创建子账号</a>
44                     <h3 class="songti">选择其他子账号</h3>
45                   </div>
46                <div id="jobmanagerlistbody" class="modal-body medium"></div>
47             </div>
48          </div>
 
 
 
$(document).ready(function(){
2         $('.rep_summaryrep').on('click','.selectothersubaccouts',function(){
3            var target = $(this);
4            $('#jobmanagerlistbody').html('');
5            $("#jobmanagerlist").show().position({
6          my:"left-13 top",
7          at:"left bottom+9",
8          of:target
9       });
10           $.ajax({
11          type: 'GET',
12          url: OC.filePath('jobposition', 'ajax', 'getjobmanagerlist.php'),
13          data: {dir:'reports',uid:$('#current_uid').val()},
14          cache: false,
15          beforeSend: function(xhr, settings) {
16             if(!showLoading($('#jobmanagerlistbody')))
17                return false;
18          },
19          success: function(result){
20             if (!isLoggedIn(result, target)) {
21                window.location = redirect_url;
22                return;
23             }           
24             $('#jobmanagerlistbody').html(result);
25          }
26       });
27         })
28    
29    $("#jobmanagerlist").on("click", ".close", function() {
30       $("#jobmanagerlist").hide();
31    })
 
32    $(document).bind('keydown', function(event) {
33       if(event.keyCode == 27) {
34          $(".popup").hide();
35          return true;
36       }
37    });
38
39    $(document).bind('mousedown', function(e){
40       e = $.event.fix(e);
41       var otarget = $(e.target);
42       if(otarget.closest(".popup").length>0) {
43          if(otarget.hasClass("closediv")) {
44             otarget.closest(".popup").hide();
45             return true;
46          }
47          return true;
48       }    
49       // close all popup that no need keep and dropdown by open class
50       $('.popup').not('.keepopen').hide().closest('.dropdown.open').removeClass('open');
51       return true;
52    });
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在JS中调用Vue组件并显示dialog,同样可以先创建一个全局的dialog组件,然后在需要显示dialog地方调用该组件。 下面是实现的步骤: 1. 创建全局的dialog组件 在Vue实例的components属性中注册一个全局的dialog组件,并在模板中显示需要展示的内容。 ```js Vue.component('dialog', { props: { title: String, content: String }, template: ` <div class="dialog"> <div class="dialog__header">{{title}}</div> <div class="dialog__content">{{content}}</div> </div> ` }); ``` 在上面的代码中,我们创建了一个名为dialog的组件,该组件接收两个props:title和content,分别表示dialog的标题和内容。在模板中,我们通过插值表达式将这两个props渲染到页面上。 2. 在需要显示dialog地方调用该组件 在需要显示dialog地方,可以通过Vue实例的$mount方法创建一个新的Vue实例,并将dialog组件作为选项传递给该实例的components属性。然后,将该实例的$el属性插入到DOM中,显示dialog组件。 ```js function showDialog(title, content) { let dialogInstance = new Vue({ el: document.createElement('div'), components: { 'dialog': Vue.component('dialog') }, template: '<dialog :title="title" :content="content"></dialog>', data: { title, content } }); document.body.appendChild(dialogInstance.$el); } ``` 在上面的代码中,我们创建了一个名为showDialog的函数,用于显示dialog组件。该函数通过创建一个新的Vue实例来显示dialog组件,并将该实例的$el属性插入到DOM中。在模板中,我们通过绑定数据的方式将传入的title和content渲染到页面上。 3. 隐藏dialog组件 在需要隐藏dialog地方,可以通过销毁dialog实例来隐藏dialog组件。 ```js function hideDialog() { let dialogEl = document.querySelector('.dialog'); if (dialogEl) { dialogEl.parentNode.removeChild(dialogEl); } } ``` 在上面的代码中,我们创建了一个名为hideDialog的函数,用于隐藏dialog组件。该函数通过查询DOM中是否存在dialog元素,如果存在则删除该元素,从而隐藏dialog组件。 综上所述,我们可以通过创建全局的dialog组件,并在需要显示dialog地方调用该组件来显示dialog。同时,可以通过销毁dialog实例来隐藏dialog组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值