Creating new records using Visualstrap Modals. Demo : http://blogforce9dev-developer-edition.ap1.force.com/VSModals

VSModals.page

<apex:page controller="VSModals_Con">
    <vs:importvisualstrap />
    <apex:form >
        <vs:visualstrapblock >
            <vs:pageheader title="Cases" subtitle="Cases List" icon="file"/>
            <vs:panel title="All Cases" type="primary" id="allCases">
                <vs:well styleclass="well-sm" style="text-align:center">
                    <a class="btn btn-success btn-md" onclick="$('#newCase').modal('show');return false;">New Case</a> 
                </vs:well>
                <apex:dataTable value="{!cases}" var="case" styleClass="table table-bordered table-hover">
                    <apex:column value="{!case.CaseNumber}" headerValue="CaseNumber" styleClass="{!IF(case.isClosed,'','warning')}"/>
                    <apex:column value="{!case.Subject}" headerValue="Subject" styleClass="{!IF(case.isClosed,'','warning')}"/>
                    <apex:column value="{!case.Status}" headerValue="Status" styleClass="{!IF(case.isClosed,'','warning')}"/>
                    <apex:column value="{!case.Priority}" headerValue="Priority" styleClass="{!IF(case.isClosed,'','warning')}"/>
                </apex:dataTable>
            </vs:panel>
            
            <vs:modal id="newCase" title="New Case">
                <apex:outputPanel layout="block" id="newCasePanel">
                    <apex:pageBlock mode="maindetail">
                        <apex:pageBlockSection >
                            <apex:inputField value="{!caseObj.Subject}"/>
                            <apex:inputField value="{!caseObj.Status}"/>
                            <apex:inputField value="{!caseObj.Description}"/>
                            <apex:inputField value="{!caseObj.Priority}"/>
                        </apex:pageBlockSection>
                    </apex:pageBlock>
                    <apex:outputPanel layout="block" styleClass="modal-footer">
                        <apex:commandButton value="Cancel" styleClass="btn-warning" html-data-dismiss="modal"/>
                        <apex:commandButton value="Save" styleClass="btn-success" onclick="$(this).button('loading')" html-data-loading-text="Saving..." action="{!saveCase}" reRender="newCasePanel,allCases"/>
                    </apex:outputPanel>
                    <apex:outputPanel rendered="{!isSuccess}">
                        <script>
                            $('#newCase').modal('hide');
                        </script>
                    </apex:outputPanel>
                </apex:outputPanel>
            </vs:modal>
            
        </vs:visualstrapblock>
    </apex:form>
</apex:page>

VSModals_Con.cls

public class VSModals_Con {

    public Boolean isSuccess{get;set;}
    public Case caseObj{get;set;}
    
    public VSModals_Con() {
        init();
    }
    
    //method to save the records
    public void saveCase(){
        try{
            insert caseObj;
            init();
            isSuccess = true;
        }
        catch(Exception ex){
            Apexpages.addMessages(ex);
            isSuccess = false;
        }
    }
    
    //fetch the cases
    public List<Case> getCases(){
        return [SELECT Id,CaseNumber,Status,Priority,Type,Subject,isClosed FROM Case ORDER BY CreatedDate DESC];
    }
    
    
    private void init(){
        caseObj = new Case();
        isSuccess = false;
    }

}