HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

"Sign In - Sign Up Dual Modal"
Bootstrap 3.1.0 Snippet by TXTCLASS

.prettyline { height: 5px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } */ Color line credit to ninjamonk: [[http://bootsnipp.com/snippets/featured/mix-amp-match-login]]

Questions / Comments:

Posting GuidelinesFormatting

hei!!
Can some some one help me how to use this code as i'm using bootstrap v 3.3.7 but its not working

Priyanka Rai () - 6 years ago - Reply 0

thank for share can i take only register script and merge with my modal login script ? sorry for bad english....i hope everyone help me thank

Poetensai Shugoi () - 7 years ago - Reply 0

How can I connect it to Sql Server Management Studio?

wreckitralph () - 7 years ago - Reply 0

Hello i have implemented this modal in my website but the 3 radio buttons are not aligned as they are supposed. The show in the left end of the window. anything I am missing? Thanks

andreas386 () - 8 years ago - Reply 0

My code is working in HTML 5. but when I copy paste the code into a php file its not working... please help me

Sanjoy () - 8 years ago - Reply 0

how does this work? I saved the html in a file. But when i open itand press the button nothing happens

Denis Dorozhkin () - 8 years ago - Reply 0

A little update for HTML 5 validated

<div class="container center">
<hr class="prettyline">

<h1>Sorry</h1>
<h3>You need to sign in or register for this service</h3>
Donate Dogecoin: DD7StzN1wGQhE4a47uDsBodkS4DE8gxcwh

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button>

<hr class="prettyline">
</div>

<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">

<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
<li class="">Why?</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">

We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.

Please contact JoeSixPack@Sixpacksrus.com for any other inquiries.

</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>

<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" type="text" class="form-control input-medium" placeholder="JoeSixpack" required="">
</div>
</div>

<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input id="passwordinput" name="passwordinput" class="form-control input-medium" type="password" placeholder="********" required="">
</div>
</div>

<div class="control-group">
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme-0" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>

<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control input-large" type="text" placeholder="JoeSixpack@sixpacksrus.com" required="">
</div>
</div>

<div class="control-group">
<label class="control-label" for="user-id">Alias:</label>
<div class="controls">
<input id="user-id" name="user-id" class="form-control input-large" type="text" placeholder="JoeSixpack" required="">
</div>
</div>

<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control input-large" type="password" placeholder="********" required="">
1-8 Characters
</div>
</div>

<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control input-large" name="reenterpassword" type="password" placeholder="********" required="">
</div>
</div>

<div class="control-group">
<h3>Humanity Check:</h3>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>

<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Ed () - 8 years ago - Reply 0

Hi maxsurgy ... Nice work ...
I have a question though.
How Can I close the modal once I open it. Looking for javascript snippet (not just hitting the Close button)
Im looking for somthing like this: $('#myModal').modal('hide')

Which doesn't work for me

Amirali Darvishzadeh () - 9 years ago - Reply 0

help please..
modal window is not popping up

my html page code
http://ideone.com/JaXX1J

kamal () - 9 years ago - Reply 0

I think you are missing including jQuery before Bootstrap JS.

maxsurguy () - 9 years ago - Reply 0

help me please.. I want sent paramenter to model when click sign in. thanks for help..

Nakamura Pan () - 9 years ago - Reply 0

Don't work here :( I just copy this code

Fernando Carvalho () - 9 years ago - Reply 0

each snippet is beautifully designed. I love web.

shehbaz1992 () - 10 years ago - Reply 0

Nice work.

Joshua Edward Koitzsch () - 10 years ago - Reply 0

Thanks for posting :)
I love it.

The color line is actually from Bootsnipp's login page/registration page but I allow people to use it.

"Sign In - Sign Up Dual Modal" Bootstrap 3.1.0 Snippet by TXTCLASS

Related: See More

Questions / Comments:

"Sign In - Sign Up Dual Modal"
Bootstrap 3.1.0 Snippet by TXTCLASS