发表新帖
发表新帖

JQuery Modal Boxes and Iframe

前端 未结
关注
11 1039
名媛妹妹
名媛妹妹 2020-12-01 06:44

I\'ve been using Simple Modal and i feel it doesn\'t live up to what i need at the moment.

Is there a Modal Box that supports loading external files and allows those

相关标签:
11条回答
  • 暖寄归人
    2020-12-01 07:27

    My FrameDialog will allow for this, it basically extends on the Dialog... if you're using the same domain, you should be able to call $.FrameDialog.close() though, if you're redirecting, you can simply redirect the parent. window.parent.location will do.

    http://plugins.jquery.com/project/jquery-framedialog

    0 讨论(0)
  • 野的像风
    2020-12-01 07:30

    parent.$.modal.close(); works for simple modal plugin.

    0 讨论(0)
  • 遥遥无期
    2020-12-01 07:30

    Have you tried ThickBox ?

    0 讨论(0)
  • 谎友^
    2020-12-01 07:31

    I have found the solution for me, it's using nyroModal. It supports iframes and closing of the modal through its iframe child with this code.

    parent.$.nyroModalRemove();

    I am going to accept Russ Cam's answer to give him more rep since his reply made me think a lot about how this is going to work and eventually made me find the answer.

    0 讨论(0)
  • 有刺的猬
    2020-12-01 07:33

    Below is a basic dialog interaction loading content into an iFrame and then closing the dialog from the iFrame.

    Note that to illustrate this I have two code snippets. The first is labeled file1.html. The second you should name "myPage.html" if you want it to work and place it in the same directory as the first file.

    Note that the call to close the dialog could be used in other ways depending on your desired functionality. For example another example could be on successful form submission.

    Create the files locally on your system and open file1.html and try it out.

    file1.html

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#modalDiv").dialog({
                modal: true,
                autoOpen: false,
                height: '180',
                width: '320',
                draggable: true,
                resizeable: true,   
                title: 'IFrame Modal Dialog'
            });
            $('#goToMyPage').click(
                function() {
                    url = 'myPage.html';
                    $("#modalDiv").dialog("open");
                    $("#modalIFrame").attr('src',url);
                    return false;
            });                 
      });
    </script>
    </head>
    <body>
        <a id="goToMyPage" href="#">Go to My Page</a>
        <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
    </body>
</html>

    myPage.html

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#clickToClose').click(
                function() {
                    window.parent.$("#modalDiv").dialog('close');
                    return false;
            });
            // uncomment and use the below line close when document is ready (no click action by user needed)
            // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
            // window.parent.$("#modalDiv").dialog('close');                    
        });
    </script>
    </head>
    <body>
        <a id="clickToClose" href="#">Click to close.</a>
    </body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题