Bootstrap Snippet Modal(custom) using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="row">
               <div class="clearHeader">
                  <div class="col-sm-4">
                     <a href="index.html"></a>
                  </div>
                  <div class="col-sm-8">
                     <a href="#sidr" class="burgWrapper" id="simple-menu">
                       <div class="burg"></div>
                     </a>
               <ul class="topOptions">
                        <li><a href="#">List your property</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a data-target=".bs-modal-sm" data-toggle="modal" href="#signup">Login</a></li>
                     </ul>
                  </div>
               </div>
            </div>
    </div>
    
    
    <div aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade bs-modal-sm adj-modal in" style="display: block;">
      <div class="modal-content">
          <div class="modal-header cus-modal-header">
              <button data-dismiss="modal" class="close close-adj" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h2 id="myModalLabel" class="modal-title" style="color:#fff;">LOGO</h2>
          </div>
          <div class="modal-body">
            <div class="row">
                  <div class="col-xs-7">
                      <a href="#" class="btn btn-danger"><i class="fa fa-google-plus"></i>· ·Continue with Google</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css');
.topOptions ul{list-style-type:none;}
.topOptions li {
    float: right;
    margin-right: 30px;
    margin-top: 10px;
}
.topOptions li a {
    color: #fff;
    text-transform: uppercase;
    background:orange;
    padding:10px;
}
.topOptions li a:hover {
    color: #fff;
    text-decoration: none;
}
.linkSection {
    background-color: #f1f1f1;
    padding: 60px 0;
}
.darkHeader {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    padding: 10px 0;
    position: fixed;
    top: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script type="text/javascript">
   $("#sign").click(function(){
    $("#div1").load("sign-up.html");
}); 
   
   </script> 
   
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal(custom)"
Bootstrap 3.3.0 Snippet by babai8961731411

Related: See More

Questions / Comments:

"Modal(custom)" Bootstrap 3.3.0 Snippet by babai8961731411

Related: See More

Questions / Comments:

"Modal(custom)"
Bootstrap 3.3.0 Snippet by babai8961731411