代码之家 › 专栏 › 技术社区 › J. Paul

如何使弹出模型自动显示

popup javascript

J. Paul · 技术社区 · 7 年前

显示模式 $(".modal_main").show(); 到 $(".modal_main").false(); 但我也面临同样的问题。

<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
    $(".modal").fadeIn();
    $(".modal_main").show();
      });
});
$(document).ready(function(){
  $(".close").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
});
</script>
</head>
<body>
<button class="call_modal" style="cursor:pointer;">Show Modal</button>

</body>
</html>

2 回复 | 直到 7 年前

Stwosch 7 年前

.click 陈述

另外,不要创建两个 .ready 声明,这是没有必要的。

$(document).ready(function(){

  $(".modal_main").show();

  $(".call_modal").click(function(){
    $(".modal").fadeIn();
    $(".modal_main").show();
  });

  $(".close").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
  });
});

Artem Kolodko 7 年前

首先,你不应该使用两份文件。准备好的在加载页面并单击附加的事件后,您应该触发您的单击事件或直接显示div,如示例所示。

$(document).ready(function(){
  $(".call_modal").click(function(){
 
    $(".modal").fadeIn();
    $(".modal_main").show();
      });
      
      $(".close").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
      
      //$(".call_modal").click(); Do not use this in production code!
      $(".modal_main").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" style="display:none">modal visible</div>
<div class="modal_main" style="display:none">main modal visible</div>

<button class="call_modal" style="cursor:pointer;">Show Modal</button>