私はちょうど

-6

2017-01-13 kdm123

これまでに試したことを説明し、コードを投稿する必要があります。 – ZimSystem

私はCSSを試していますが、私はブートストラップを使ってそのような機能を行うことができますか？知りたいのは、応答ボタンが必要です。 – kdm123

ブートストラップでのみ可能でなければなりません。 HTMLはどこですか？ – ZimSystem

-2

Try this code 

html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <title></title> 
    <style> 
     .left, 
     .right { 
      position: fixed; 
      top: 0; 
      bottom: 0; 
      height: 2.5em; 
      margin: auto; 
      background: red; 
     } 

     .left { 
      left: 0; 
      -webkit-transform-origin: 0 50%; 
      -moz-transform-origin: 0 50%; 
      -ms-transform-origin: 0 50%; 
      -o-transform-origin: 0 50%; 
      transform-origin: 0 50%; 
      -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
      -moz-transform: rotate(-90deg) translate(-50%, 50%); 
      -ms-transform: rotate(-90deg) translate(-50%, 50%); 
      -o-transform: rotate(-90deg) translate(-50%, 50%); 
      transform: rotate(-90deg) translate(-50%, 50%); 
     } 

     .right { 
      right: 0; 
      -webkit-transform-origin: 100% 50%; 
      -moz-transform-origin: 100% 50%; 
      -ms-transform-origin: 100% 50%; 
      -o-transform-origin: 100% 50%; 
      transform-origin: 100% 50%; 
      -webkit-transform: rotate(90deg) translate(50%, 50%); 
      -moz-transform: rotate(90deg) translate(50%, 50%); 
      -ms-transform: rotate(90deg) translate(50%, 50%); 
      -o-transform: rotate(90deg) translate(50%, 50%); 
      transform: rotate(90deg) translate(50%, 50%); 
     } 
    </style> 
</head> 
<body> 
    <!-- Left float button --> 
    <button type="button" class="btn btn-danger left" data-toggle="modal" data-target=".enquiry"><b>Send Enquiry</b></button> 

    <!-- Right Float Button --> 
    <button type="button" class="btn btn-danger right" data-toggle="modal" data-target=".enquiry"><b>Send Enquiry</b></button> 


    <div class="modal fade enquiry" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 

       <div class="container" style="width:80%; margin:0 auto;"> 

        <h3 class="tittle" style="text-align:center">Send Enquiry</h3> 
        <form> 
         <div class="form-group"> 
          <label>Full Name</label> 
          <input type="text" class="form-control" placeholder="Name"> 
         </div> 
         <div class="form-group"> 
          <label>Email address</label> 
          <input type="email" class="form-control" placeholder="Email"> 
         </div> 

         <div class="form-group"> 
          <label>Message</label> 
          <textarea class="form-control" placeholder="Message"></textarea> 
         </div> 


         <button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-info" data-dismiss="modal">Close</button> 
         <br /> 
         <br /> 
        </form> 

       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

を検索するためのモーダルウィンドウを開く必要があります右または画面の左側に、フローティングボタンでいくつかのいずれかを助けることができるのブートストラップで左または右またはトップ画面に浮かぶアクションボタンを探しています

出典

2017-01-13 14:46:57 abdev

@adbdev答えがありがとう、あなたが私のday.one問題を保存しました。モーダルポップアップの残りの部分を閉じると、残りの部分がぼやけています。 – kdm123

なぜ ' .left'と '.right'ですか？ブートストラップ 'pull-left'または' pull-right'を使うだけです – ZimSystem

答えて

関連する問題