在模式框中打开页面

Question

I have a script that restrict the click on a href link if there;s no checkbox selected. I want the editpr.php open in modal box. The problem is I'm not familiar with modalbox. Any help?

<a class="button edit" style="cursor:pointer;" ><span><b>Edit Purchase Request</b></span></a>
<a class="button remove" style="cursor:pointer;" name="remove"><span><b>Remove Purchase Request</b></span></a> 

This is my script

jQuery(function ($) {
    $('a.button.edit, a.button.remove').click(function () {
        if ($('input[name="checkbox[]"]:checked').length == 0) {
            return;
        }

        if (!confirm('Do you want to continue?')) {
            return
        }

        var frm = document.myform;
        if ($(this).hasClass('edit')) {
            frm.action = 'editpr.php';
        }
        if ($(this).hasClass('remove')) {}
        frm.submit();
    })
})

Answer 1

You can't open a page in a modal box just with pure javascript, as "alert()" or "confirm()".

To do what you want you need to put your 'editpr.php' content inside a div, and make it modal with CSS.

Actually we have a lot of libraries that make it happen easily, I think that most used is: http://www.jacklmoore.com/colorbox/

Check the "Outside HTML (Ajax)" and "Outside Webpage (Iframe)" on this example page, probably is the same thing that you want to do: http://www.jacklmoore.com/colorbox/example1/

Answer 2

There are some useful jQuery plugins that can make your job really easy. I suggest you give them a try. Here you have an example.

Answer 3

Since you are already using jQuery you could use jquery-ui.

They have an exmple of what you want to do here: http://jqueryui.com/dialog/#modal

Once you get your modal dialog element setup, all you have to do is make and XHR for editpr.php, load the result into the elements innerhtml, then display the dialog.

// setup your modal dialog
var el = $( "#editpr-dialog" ).dialog({
  // ... (other config options)
  modal: true
});

// XHR editpr.php and show the dialog box
$.get('editpr.php', function(data){
  el.html(data).dialog('open');
});

Answer 4

custombox插件具有许多漂亮的功能，并且可以与Jquery惊人地协同工作： http ://dixso.github.io/custombox/