• 基于jQuery的nyroModal模态对话框插件的使用,及IFrame方式窗口的关闭问题


    官网地址:http://nyromodal.nyrodev.com/ 

    调用方法很简单,首先是把对应的库引用进来(<!--[if IE 6]> 部分是为了兼容IE6)

    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
    <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]
    -->

    再调用如下方法:

    $(function() {
    $('.nyroModal').nyroModal();
    });

    之后,只需要为链接加上class="nyroModal"即可(手动的调用除外)

    Ajax 调用。

    <a href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">Ajax</a>

    Ajax调用并支持抽取指定内容。
    如果只需要显示页面上某一个元素,那么只需要在请求时把该元素ID号做为锚点加入请求地址中去。如只显示指定ID的内容

    <a href="http://nyromodal.nyrodev.com/demoSent.php#UserInfo" class="nyroModal">Ajax</a>

    则只显示demoSent.php里ID号为UserInfo的元素;如果UserInfo不存在,则显示所有内容。
    调用图片也很简单

    <a href="http://nyromodal.nyrodev.com/img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>

    更多的例子,可以查看官网,使用起来都是非常简单方便的。

    Form提交(返回结果显示在对话框内)

    Form提交并过抽取定内容(用法同Ajax)

    同样,我们只需要为form元素添加class="nyroModal"属性;如果需要在IFrame的方式,那就指定target="_blank"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。

    Form提交(返回结果将显示在弹出的对话框内)

    <form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
      
    <input type="text" name="wouhou" />
      
    <input type="submit" value="simple form"/>
    </form>

    如果需要在IFrame的方式,那就指定target="_blank"属性;

    <form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal" target="_blank">
      
    <input type="text" name="wouhou" />
      
    <input type="submit" value="simple form in iframe"/>
    </form>

    Form提交并过抽取定内容(用法同Ajax)我们只需要为form元素添加class="nyroModal"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。
    <form method="post" action="http://nyromodal.nyrodev.com/demoSent.php#test" class="nyroModal">
      
    <input type="text" name="wouhou" />
      
    <input type="submit" value="simple form Filtering Content"/>
    </form>

    以IFrame方式弹出的窗口,官网上提供的关闭弹出窗的方法例子并不管用。

    通过百度和谷歌中文没找到正确的方法,最后还是谷歌了英文的站点才找到正确的关闭方法,在子窗口中调用如下代码即可

    parent.$.nmTop().close();


    Form提交文件上传

    Form提交文件上传
    <form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
    <input type="file" name="file"/>
    <input type="submit" value="form with file"/>
    </form>

    Form提交文件上传并抽取指定内容(用法同Ajax)提交目标页面的元素的ID号为锚链接
    <form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php#blabla" class="nyroModal">
      <inputtype="file" name="file"/>
      <inputtype="submit" value="form with file Filtering Content"/>
    </form>

    DOM元素显示
    把调用者链接的href设置为目标元素的ID既可。注意目标元素的本身是不作为显示输出的,显示的只是其innerHTML的内容。

    <href="#test" class="nyroModal">DOM Element (hidden div)</a>
    <div id="test" style="display: none;  600px;">
      
    <href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">Open a new modal</a><br />
      Test
    </div>

    如上:只会在弹出窗口显示下图结果

  • 相关阅读:
    【加密】 RSA
    【Resource】【ResourceLoader】【ResourcePatternResolver】学习
    【拦截器】Springboot项目之拦截器使用
    【OpenSSl】linux下OpenSSL的RSA密钥生成
    【微服务架构】图解
    【md5】几种常见的数据摘要算法(MD5、CRC32、SHA1和SHA256)
    【VM VirtualBox】【Vagrant】的安装及使用
    VUE中解决echarts数据二次渲染不成功的问题xAxis
    TypeError: Cannot read property 'map' of null
    VS code 卡顿很严重
  • 原文地址:https://www.cnblogs.com/lynnlin/p/2233072.html
Copyright © 2020-2023  润新知