2017-09-19 74 views
0

我正在生成動態鏈接,但是當我單擊鏈接時,模式窗口在褪色的div後面打開,這樣我就不能再單擊任何東西。任何想法如何讓它出現在頂部,以便它可以關閉?模態窗口在褪色後打開

此外,如何在點擊其中一個鏈接時阻止頁面跳轉到頂部?我希望滾動位置保持不變,以便您不必嘗試查找頁面上的位置。任何幫助讚賞。

<script> 
function showModal(el) { 
jQuery("#myModalLabel").text(el.title); 
jQuery("#myModal").modal() 

} 

</script> 

<a href="#" id="mymodal" onclick="showModal(this)" style="font-size:16px;" 
title="<? echo $row ['title'] ?> 
by 
<? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a> 


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel"> 
<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> 

    </div> 
    <div class="modal-body"> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button> 

    </div> 
</div> 
+0

嘗試設置[z-index的] (https://www.w3schools.com/cssref/pr_pos_z-index.asp)在css-class上。 –

回答

0

固定。只需要移動以外的容器剛剛結束標記之前

0

試試這個傢伙

HTML

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="yourModal" data-target="#myModal" data-title='<? echo $row ["title"] ?> by <? echo $row ["author"] ?> '><? echo $row ['first_line'] ?></button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

的JavaScript(jQuery的)

 <script> 
    $(document).on("click", "#yourModal", function() { 
     var title = $(this).data('title'); 
      $("#myModalLabel").val(title); 
     }); 

    </script>