เทคนิค การสร้าง From Login ให้ดูโดดเด่น ด้วย JavaScript

สำหรับวันนี้ ก็จะมาแนะนำเทคนิค การสร้าง From Login  ให้ดูโดดเด่น ด้วย JavaScript

1. เข้าไปศึกษาตัวอย่างได้ที่ 
http://getbootstrap.com/javascript/  เนื้อหาดีมากครับ มีตัวอย่างด้วย

2. นี้คือ Code ที่ผมใช้ครับ


Code

<div class="alert alert-info"><h2>ยินดีต้อนรับ</h2><h4> เข้าสู่ระบบจัดการข้อมูลศูนย์สุขภาพชุมชน ตำบลจักราช กรุณาเข้าสู่ระบบเพื่อใช้งานได้อย่างมีประสิทธิภาพ</h4>
<!--/test-->  
<br><br>
<p>
&nbsp &nbsp &nbsp<a href="#myModal" role="button" class="btn btn-success" data-toggle="modal">Login เข้าสู่ระบบ</a>&nbsp
<img id="logo-header" src="<?php echo Yii::app()->theme->baseUrl;?>/assets/img/pcu/1409680048_login.png" />
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">กรุณา Login เข้าสู่ระบบ</h3>
  </div>
  <div class="modal-body">
    <!--/test-->  
<div class="container">
<?php echo CHtml::form(array("MemberLoginCheck")); ?>
<div class="row-fluid">
        <form class="log-page" />
            <h3>เข้าสู่ระบบ</h3>    
            <div class="input-prepend">
                <span class="add-on"><i class="icon-user"></i></span>
                <input class="input-xlarge" type="text" name="txt_username" placeholder="Username" autocomplete="off" />
            </div>
<br>
            <div class="input-prepend">
                <span class="add-on"><i class="icon-lock"></i></span>
                <input class="input-xlarge" type="password" name="txt_password" placeholder="Pass.." />
            </div>
            <div class="controls form-inline">
                <label class="checkbox"><input type="checkbox" /> จำชื่อของฉันในระบบ</label>
                <button class="btn-u" type="submit">เข้าสู่ระบบ</button>
            </div>
            <hr />
            <h4>ลืมรหัสผ่าน ?</h4>
            <p>ท่านสามารถ <a class="color-green" href="#">คลิกเพื่อ</a> สมัครสมาชิกใหม่</p>

        </form>
<?php echo CHtml::endForm(); ?> 
    </div><!--/row-fluid-->
</div><!--/container-->

<!--/test-->  
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>
</p> 
</div>
<!--/test-->  

กรณีที่เอาไปใส่ที่ link อักษร ธรรมดา
<a href="#myModal"  data-toggle="modal">เข้าระบบ</a>

จบครับ ติดตรงไหน ถามได้ครับ ^^
+Prasertsak Keepper