Войти модальный с логотипом

Войти МодальныеВойти модальный с логотипом

Может кто-то дать мне идеи о том, как это сделать? Я попытался сделать это на бутстрапе, но логотип внутри модального. Я хочу, чтобы мой логотип был посередине, а половина его находилась снаружи, как на первом снимке. Im новое для html и css. Может кто-нибудь подскажет мне, как это сделать?

вот моя работа ...

Мой Логин Модальные

источник

2016-05-07 Yukihira Soma

http://stackoverflow.com/a/18647348/2592042 это может помочь –

Это код, который вы просите. Используйте этот код, он отлично подойдет вам.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Modal Login</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<style> 
 
.logo-margin-negative{ 
 
margin-top: -100px; 
 
} 
 
.modal{ 
 
padding-top: 100px ! important;} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Click button to enter login</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Login Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title"><img src="http://placehold.it/150x150" class="center-block img-circle logo-margin-negative"></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <form> 
 
      <div class="row"> 
 
    <div class="form-group col-sm-5 col-sm-offset-4"> 
 
    <label class="sr-only" for="exampleInputAmount">Username</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div> 
 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Username"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group col-sm-5 col-sm-offset-4"> 
 
    <label class="sr-only" for="exampleInputAmount">Password</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon"><i class="fa fa-key"></i></div> 
 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Password"> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <div class="row"> 
 
      <div class="col-sm-5 col-sm-offset-4"> 
 
      <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Login</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

источник

2016-05-07 12:24:56

так я просто кладу изображение (логотип) там внутри круга, сэр? –

Спасибо большое спасибо спасибо спасибо спасибо sir :) –

Да, просто вставьте свой логотип в атрибут «src» и измените размер своего логотипа в соответствии с вами. Используя высоту и ширину свойства css. Счастливое кодирование :-) ;-) –

Войти модальный с логотипом

ответ

Смежные вопросы