result-from-jquery-function-to-text-in-bootstrap-modal

by dekkard

HTML

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        
        
<div class="container">
    <div class="well well-large">
        <p class="clickable">Change this text and insert some words.</p>

        <div class="modal fade" id="form-content">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Change the word</h3>
                    </div>
                    <div class="modal-body">
                        <form class="contact" id="contact" name="contact">
                            <label class="label" for="name">Your Text</label><br>
                            <input class="input-xlarge" name="name" type="text"><br>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <input class="btn btn-success" id="submit" type="submit" value="Submit">
                        <a class="btn" data-dismiss="modal" href="#">Back</a>
                    </div>
                </div>
            </div>
        </div><!-- modal -->

        <div id="thanks">
            <p><a class="btn btn-primary btn-large" data-toggle="modal" href="#form-content">Modal
            powers, activate!</a></p>
        </div>
    </div>
</div>

JavaScript

jQuery(document).ready(function() {

    $(".clickable").click(function(e){
        e.preventDefault();
        
        var s = window.getSelection();
        var range = s.getRangeAt(0);
        var node = s.anchorNode;
        
        while(range.toString().indexOf(' ') != 0) {                 
            range.setStart(node,(range.startOffset -1));
        }
        range.setStart(node, range.startOffset +1);
        do{
            range.setEnd(node,range.endOffset +1);
        } while(range.toString().indexOf(' ') == -1 && 
                range.toString().trim() != '');
        
        var str = range.toString().trim();
        
        $('.modal-body .contact input').val(str);
        $('#form-content').modal();
    });
});