CODEWITHSUNDEEP
javascriptphpjqueryhtml
404 Not Found
404 Not Found

Reputation: 1223

How to popup php(mixed with html tags) file in javascript function

i want to popup full php file in javascript function...

i have javascript function like this...

    (function() {  
tinymce.create('tinymce.plugins.wpc', {  
    init : function(ed, url) { 
        ed.addButton('wpc', {  
            title : 'Add Contact Us form',  
            image : url+'/dd_note.gif', 
            onclick : function() { 
               ** here i want to popup php(mixed with html tags) file**
            }  
        });  
    },  
    createControl : function(n, cm) {  
        return null;  
    },  
});  
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);  
})();

can anybody suggest me how to do it?

Thanks in advance

Upvotes: 0

Views: 213

Answers (4)

rybo111
rybo111

Reputation: 12588

Another option is to use Bootstrap (developed by Twitter).

You can then use their Modal system.

Upvotes: 1

mehmetseckin
mehmetseckin

Reputation: 3107

You might want to use the dialog extension from jQueryUI. 

(function () {
    tinymce.create('tinymce.plugins.wpc', {
        init: function (ed, url) {
            ed.addButton('wpc', {
                title: 'Add Contact Us form',
                image: url + '/dd_note.gif',
                onclick: function () {
                    $(document.body).append('<div id="myPopUpBox"></div>');
                    $("#myPopUpBox").dialog({
                        open: function (event, ui) {
                            $('#myPopUpBox').load('my.PHP.file.php');
                        }
                    });
                }
            });
        },
        createControl: function (n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();

Hope this helps..

Upvotes: 1

Ramesh Prajapati
Ramesh Prajapati

Reputation: 25

I hope this code can help you. // leanModal v1.1 by Ray Stone - http://finelysliced.com.au // Dual licensed under the MIT and GPL

(function($) {

$.fn.extend({leanModal: function(options) {

   var defaults = {top: 100, overlay: 0.5, closeButton: null};

       var overlay = $("<div id='lean_overlay'></div>");

       $("body").append(overlay);

       options = $.extend(defaults, options);

       return this.each(function() {

           var o = options;

           $(this).click(function(e) {

               var modal_id = $(this).attr("href");

               $("#lean_overlay").click(function() {

                   close_modal(modal_id)

               });>


               $(o.closeButton).click(function() {

                   close_modal(modal_id)

               });

               var modal_height = $(modal_id).outerHeight();

               var modal_width = $(modal_id).outerWidth();

               $("#lean_overlay").css({"display": "block", opacity: 0});

     $("#lean_overlay").fadeTo(200, o.overlay);

               $(modal_id).css({"display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(modal_width / 2) + "px", "top": o.top + "px"});

               $(modal_id).fadeTo(200, 1);

               e.preventDefault()

          })

       });

       function close_modal(modal_id)

          {

           $("#lean_overlay").fadeOut(200);

           $(modal_id).css({"display": "none"})

       }

     }

})

})(jQuery);

Upvotes: 0

Umair Hamid
Umair Hamid

Reputation: 3557

you can use jquery popup plugins like color-box. just add its function code into onclick section of your function. You can download and read documentation for color-box from here:

http://www.jacklmoore.com/colorbox/

Upvotes: 0

Related Questions