Question

我希望在我的网站上有多个模态，如下所示：

第一个模式将具有登录/注册的一般信息，如果用户是匿名的（未登录）或没有有效订阅（即使他们已登录），我将需要显示在）。我已经有了一个标志/检查。
其他模式将包含YouTube视频...

当用户点击网格中的播放按钮时，我想调用一个函数来检查我所说的标志。如果该标志为true，则将为该特定视频弹出相应的模态。如果该标志为false，则将弹出登录/注册模式。

我怎样才能做这样的事情，有人可以帮忙吗？

提前谢谢！

Answer 1

尝试这样的事情。正如你所说，如果flag为TRUE，那么触发第二个函数，这样你就可以非常简单地使用IF ELSE语句。

＆＃13;

$(document).ready(function(){
  $("#btn").on("click",function(){
      //Your first module code goes here.
      alert('I am first.');
      secondModule();
  });
});
function secondModule(){
  //Your second module code goes here.
  alert('I am second');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>

＆＃13;

Answer 2

您可能遇到一些安全问题。如果它是100％的客户端，只需使用控制台就可以轻松绕过，所以我建议对你的标志进行ajax调用，然后返回相应的html。很酷的是，你将能够在整个网站上重复使用它。

[编辑：显然，您需要为视频传递变量，脚本已更新以反映该内容。]

简而言之，在HTML中，将一个名为“checkLoggedIn”（或任何内容）的类添加到将启动模式的链接中......

<a href="a-script-that-handles-non-js-requests.php" data-videoID="somevideoID" class="checkLoggedIn">View my rad videos!</a>

然后是模态（假设这里是bootstrap）

<div class="modal fade" id="videoModal" aria-hidden="true" aria-labelledby="videoModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
     </div>
         <div class="modal-body">

        </div>
       <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->

然后在你准备好的功能......

$(function() {
$('#videoModal').modal();
    $(".checkLoggedIn").click(function( event ) {
       event.preventDefault();
let videoID = $(this).data('videoID');
         $.get( "check_login.php?videoID="+videoID, function( data ) {
             $( ".modal-body" ).html( data );
              $('#.videoModal').modal('show'); 
                //show right now with .modal-body containing the returned 
                //HTML from the check_login.php script.
         });
     });

});

因此，onload，任何归入“checkLoggedIn”的元素都将被阻止做任何可点击的事情。将激活对名为“check_login.php”的服务器端脚本的ajax调用，该脚本将返回您的登录或视频的HTML。

这样做的错误方法是某种“if”陈述来决定是否登录了这个家伙。然后显示模态。

[编辑：您的php脚本必须使用videoID做多一点]

<?php 
if(dudeIsLoggedIn()){
    $html = goGetTheHTMLForThisVideo($_GET['videoID']);
    if($html){
       echo $html;
     } else {
       echo "Sorry, the video isn't available";
     }
} else { // dude isn't logged in
    echo goGetTheHTMLForLoggingIn();
}

?>

使用一个功能检查两种不同的模态

2 个答案: