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

Question

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

@MehmetSeçkin it's opening in another window that i don't want.. i want to pop it — 404 Not Found
– 404 Not Found, Commented Dec 16, 2013 at 12:34
I see, you might want to try jQueryUI's .dialog() or some other pop-up plugins. — mehmetseckin
– mehmetseckin, Commented Dec 16, 2013 at 12:42
I think their are lot of plugins as other suggested, You just need to pick one. — kuldeep.kamboj
– kuldeep.kamboj, Commented Dec 16, 2013 at 12:59

mehmetseckin · Accepted Answer · 2013-12-16 12:49:53Z

1

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..

answered Dec 16, 2013 at 12:49

mehmetseckin

3,1351 gold badge34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rybo111 · Accepted Answer · 2013-12-16 12:51:09Z

1

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

You can then use their Modal system.

answered Dec 16, 2013 at 12:51

rybo111

12.6k4 gold badges65 silver badges74 bronze badges

Comments

Umair Hamid · Accepted Answer · 2013-12-16 12:21:54Z

0

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/

answered Dec 16, 2013 at 12:21

Umair Hamid

3,5673 gold badges25 silver badges25 bronze badges

Comments

Ramesh Prajapati · Accepted Answer · 2013-12-16 12:37:32Z

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);

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related