自举模态onmouseover

Question

因此，我正在我的个人网页工作，这是我的第一次开发与启动。我使用php、html、css和JS作为开发堆栈。我遇到的错误是创建一个元素: 1.如果php测试通过，创建一个div，在JS中附加一个onemouseover事件(我知道如何做这件事) 2。我想要一个引导模式来打开和转换onmouseoever，并关闭，onmouseleave。到目前为止，这是代码，createModal函数是空的，因为使用this.innerHTML = blahblahblah没有工作。

        <?php 
        if(!isset($_GET["nfc"])){
            $nfc = false;
        } else {
            $nfc = filter_var($_GET["nfc"], FILTER_VALIDATE_BOOLEAN);
        }
    ?>

<?php 
        if ($nfc == true) { ?>
            <a href="#"
            id="nfc"
            data-toggle="modal"
            data-target="#basicModal"><i class="fa fa-chevron-circle-down fa-5x"></i></a>
            <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <h3>Modal Body</h3>
                        </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>
                </div>
            </div>
        <?php } else { ?>
            <i class="fa fa-chevron-circle-down fa-5x"></i>
        <?php } ?>
    </div>

JS: var元素= document.getElementById("nfc")；if (typeof(元素) != 'undefined‘& element != null) { element.onmouseover = createModal；}

Answer 1

可以使用以下jquery代码显示隐藏模式

$(document).ready(function(e){
  $("body").find("#nfc").hover(function() {
      $("#basicModal").modal('show');
  }, function(){
      $("#basicModal").modal('hide');                            
  });
});