NodeJSのブートストラップモーダルウィンドウ

NodeJSとMongoDBにダッシュボードのWebサイトを開発しています。ページの1つでは、モーダルウィンドウで画像を開く必要があります。以下はそのページのコードです。NodeJSのブートストラップモーダルウィンドウ

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>Tor Modal Check</title> 
     <link rel="stylesheet" href="css/style.default.css" type="text/css" /> 
     <link rel="stylesheet" href="css/responsive-tables.css"> 
     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
     <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script> 
     <script type="text/javascript" src="js/modernizr.min.js"></script> 
     <script type="text/javascript" src="js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="js/jquery.bxSlider.min.js"></script> 
     <script type="text/javascript" src="js/jquery.cookie.js"></script> 
     <script type="text/javascript" src="js/jquery.uniform.min.js"></script> 
     <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" src="js/flot/jquery.flot.min.js"></script> 
     <script type="text/javascript" src="js/jquery.slimscroll.js"></script> 
     <script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script> 
     <script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script> 
     <script type="text/javascript" src="js/responsive-tables.js"></script> 
     <script type="text/javascript" src="js/custom.js"></script> 

     <style type="text/css"> 
      body .modal { 
      width: 650px; 
      margin-left: -325px; 
      } 
     </style> 
    </head> 
    <body> 
    <div class="mainwrapper"> 


    <div class="rightpanel"> 

    <ul class="commentlist"> 
     <% tor.forEach(function(t){ %> 
     <li> 
      <img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" /> 
      <div class="comment-info"> 
      <h4><a href="<%= t.url %>"><%= t.url %></a></h4> 
      <p><strong>Comments: </strong><%= t.comments %></p> 
      <div class="container"> 
       <!-- Trigger the modal with a button --> 
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button> 

       <!-- Modal --> 
       <div class="modal fade" id="<%= t.modalid %>" role="dialog"> 
       <div class="modal-dialog"> 

        <!-- Modal content--> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 class="modal-title"><%= t.url %></h4> 
        </div> 
        <div class="modal-body"> 
         <img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
        </div> 

       </div> 
       </div> 

      </div> 
      </div> 
     </li> 
     <% }) %> 
    </ul> 
    </div> 
    </div> 
    </body>

私が直面しています問題はない、すべての「ビューのスクリーンショットは、」クリック可能であるということです。多くを掘り出した後、私はそれが "右パネル" divクラスのためだと判断します。

/*** MAIN PANEL ***/ 

.rightpanel { margin-left: 260px; background: #f7f7f7; } 
.rightpanel:after { clear: both; content: ''; display: block; }

margin-left: 260px;を削除した場合、すべて正常に動作します。なぜこれが起こっているのか、それを克服する方法はありますか？

PS。これは完全なコードではありません。この質問に重要なコードのみ。

EDIT 1： 私はmargin-left: 150pxにmargin-left: 260pxを変更するとき、それは完全に正常に動作します。

出典

2017-01-11 x899

body.model {margin-left：-325px; }？ – DomeTune

はモーダルウィンドウを中心に... widthはモーダルウィンドウサイズとマージンを指定します - 左はモーダルウィンドウを中心に配置します – x899

ブートストラップmodalsはすでに中央に配置されており、3種類のサイズ（.modal-lgの場合は.modal-sm,300px（デフォルト）、900pxの場合は300px）が3つあります。しかし、幅が正確に650pxになるようにするには、幅が.modal-dialogでなく、.modalに設定する必要があります。例：

@media (min-width: 768px) 
.modal-dialog { 
    width: 650px; 
}

出典

2017-01-11 07:58:22

私はブートストラップv2.3.1を使用しています。最新のブートストラップと互換性がありません。私は、モーダル-lgとモーダル-SMのようなクラスを持っていません。 – x899

とモーダルダイアログの幅を変更していますが、上記の問題は解決しません。 – x899

@ User1：あなたはあなたのモーダルにBootstrap v3マークアップを使っています。 v2には '.modal-dialog'と' .modal-content'クラスはありません。こちらをご覧ください：http://getbootstrap.com/2.3.2/javascript.html#modals –

NodeJSのブートストラップモーダルウィンドウ

答えて

関連する問題