Jquery Modal in Joomla 3

PHP
JHtml::_('jquery.framework');// load jquery first
JHTML::_('bootstrap.framework');



Javascript:
function bsModalHTMLundefined)
        {
            var bsWindowHTML = '<div id="bsdialog" class="modal fade" tabindex="-1" role="dialog">';
            bsWindowHTML = bsWindowHTML + '  <div class="modal-dialog">';
            bsWindowHTML = bsWindowHTML + '    <div class="modal-content">';
            bsWindowHTML = bsWindowHTML + '      <div class="modal-header">';
            bsWindowHTML = bsWindowHTML + '        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
            bsWindowHTML = bsWindowHTML + '        <h4 class="modal-title"></h4>';
            bsWindowHTML = bsWindowHTML + '      </div>';
            bsWindowHTML = bsWindowHTML + '      <div class="modal-body">';
            bsWindowHTML = bsWindowHTML + ' ';
            bsWindowHTML = bsWindowHTML + '      </div>';
            bsWindowHTML = bsWindowHTML + '      <div class="modal-footer">';
            bsWindowHTML = bsWindowHTML + '        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
            bsWindowHTML = bsWindowHTML + '      </div>';
            bsWindowHTML = bsWindowHTML + '    </div><!-- /.modal-content -->';
            bsWindowHTML = bsWindowHTML + '  </div><!-- /.modal-dialog -->';
            bsWindowHTML = bsWindowHTML + '</div><!-- /.modal -->';
            return bsWindowHTML;
        }//function bsModalHTMLundefined)
 function showJqueryDialog(dialogParams)
        {
            //code from http://www.iamrohit.in/create-dynamic-content-popup-using-bootstrap-modal-and-jquery/
            //css details https://www.w3schools.com/bootstrap/bootstrap_modal.asp
            //a simpler modal window is https://www.w3schools.com/howto/howto_css_modals.asp
            //jQuery("#bsdialog").remove();
            if(jQuery("#bsdialog").length == 0)jQuery(bsModalHTML()).appendTo('body'); 
            jQuery(".modal .modal-title").html(dialogParams.title);
            jQuery(".modal .modal-body").html(dialogParams.html);
             //left,width,margin-left
             jQuery("#bsdialog").css("width",'auto');
             jQuery("#bsdialog").css("display",'block');//adjust with content width
             jQuery("#bsdialog").css("left",(jQuery(window).width() - jQuery("#bsdialog").width())/2);
             jQuery("#bsdialog").css("marginLeft",'auto');
             jQuery("#bsdialog .modal-body").css("maxHeight",'none');//fit to height
       
            jQuery(".modal").modal("show");
        
        }//function showJqueryDialog()