"Modified Modal Buttons"
Bootstrap 3.3.0 Snippet by MechanisM

<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 id="myModal" class="modal fade in"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a> <h4 class="modal-title">Modal Heading</h4> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </div> <div class="modal-footer"> <div class="btn-group"> <button class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Save</button> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dalog --> </div><!-- /.modal --> <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch demo modal</a> </div> </div>
.modal .modal-header { border-bottom: none; position: relative; } .modal .modal-header .btn { position: absolute; top: 0; right: 0; margin-top: 0; border-top-left-radius: 0; border-bottom-right-radius: 0; } .modal .modal-footer { border-top: none; padding: 0; } .modal .modal-footer .btn-group > .btn:first-child { border-bottom-left-radius: 0; } .modal .modal-footer .btn-group > .btn:last-child { border-top-right-radius: 0; }

Related: See More


Questions / Comments:

Nice!

Juukie14 () - 8 years ago - Reply 0


nice but how to make the modal work on my page?

Loco () - 8 years ago - Reply 0


22

Guest () - 8 years ago - Reply 0


333

Niaro Niralik () - 8 years ago - Reply 0


выфвфыв

Niaro Niralik () - 8 years ago - Reply 0


dsa

Niaro Niralik () - 8 years ago - Reply 0


<script type="text/javascript">function login(){

var question = prompt("What is your name ?");

var reponse = "etienne";

var statut;

var nouveau = "yes";

// check if the name is in the database reponse

if(question === reponse){

parBis();

}else{

statut = prompt("Are you new here ?");

}

// what i write if the name is recognized

function parBis(){

document.getElementsByClassName("button_par")[0].innerHTML = "Hey " + question + ", welcome back !";

}

// what i write if the name is new or there is an error

if (question != reponse && statut === nouveau){

document.getElementsByClassName("button_par")[0].innerHTML = "Welcome " + question + ", please create an account.";

}else if(question === reponse){

parBis();

}else{

document.getElementsByClassName("button_par")[0].innerHTML = "<span>There must be an error. Try to put your name again</span>";

}

}

// logout

function logout(){

// window.location.reload(); only works with your environnement or website

document.getElementsByClassName("button_par")[0].innerHTML = "";

}

</script>

<style type="text/css">body {

display:flex;

flex-direction:column;

align-items:center;

align-content:center;

justify-content:flex-start;

height:100vh;

margin:0;

}

p{

font-family:roboto, sans-serif;

}

p.button_par{

color:#fff;

}

p.button_par span{

background:#fff;

color:#f44336;

border:1px solid #f44336;

border-radius:2px;

display:inline-block;

padding:15px;

}

button{

border:0;

border-radius:2px;

padding:15px 25px;

cursor:pointer;

box-shadow:5px 5px 14px 0px rgba(0,0,0,0.26);

font-size:20px;

margin:25px;

}

.login{

background:#8BC34A;

color:#fff;

}

.logout{

background:#f44336;

color:#fff;

}

button.login:hover{

background:#fff;

color:#8BC34A;

box-shadow:10px 10px 24px 0px rgba(0,0,0,0.26);

transform:scale(1.1);

}

button.logout:hover{

background:#fff;

color:#f44336;

box-shadow:10px 10px 24px 0px rgba(0,0,0,0.26);

transform:scale(1.1);

}

.button_zone{

background:#607D8B;

width:100%;

height:auto;

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

border-top:25px solid #455A64;

}</style>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<div class="button_zone">

<button class="login" onclick="login()">Login</button>

<button class="logout" onclick="logout()">Logout</button>

<p class="button_par"></p>

</div>

<p>Click on the login button to connect</p>

</body>

</html>

mmjj () - 3 months ago - Reply 0


das

Niaro Niralik () - 8 years ago - Reply 0


олролр

Niaro Niralik () - 8 years ago - Reply 0


33

Niaro Niralik () - 8 years ago - Reply 0


Nice nice)

Guest () - 8 years ago - Reply 0


Very nice modal. I will try it on my app :)

Artur Czuba () - 8 years ago - Reply 0