javascript - How can define "materializecss" modal "before" (beforeload) functionality -

-

i have used materializecss framework stuck in modal functionality.

i have made popup modal image following code:

html:

<div class="media-insert"> <a href="#img2" class="modal-trigger"><img src="images/slide1.jpg" class="img-responsive" /></a>   <div class="modal" id="img2">     <div class="modal-content"> <img src="images/slide1.jpg" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a> </div>   </div> </div>

js:

$('.modal-trigger').leanmodal();

css:

.media-insert .modal {     width: auto;     left: 0;     top: 0;     bottom: 0;     right: 0;     max-height: 100%;     overflow: visible; }

but issue that, image , modal (wrapper) both not aligned in center. , modal wrapper not responsive fancybox popup

i have tried code callback:

$('.modal-trigger').leanmodal({     ready: function () {         var modelimgw = $('.modal-content img').innerwidth();         var modelimgh = $('.modal-content img').innerheight();         $('.media-insert .model').css({             'height': modelimgh + 'px'         });         $('.media-insert .model').css({             'width': modelimgw + 'px'         });      } });

not getting, please help.

thanks in advance!

sorry earlier answer, thought not getting modal work @ all...

you used css rules affect responsiveness , width of modal, , center aligning content in modal need rule. modified css, replaced images , added btn class - can run snippet , click "full page" see working.

$('.modal-trigger').leanmodal();
.media-insert .modal {    max-height: 100%;    overflow: visible;  }  .media-insert .modal .modal-content {    text-align: center;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>  <div class="media-insert">    <a href="#img2" class="btn modal-trigger">      <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" />    </a>    <div class="modal" id="img2">      <div class="modal-content">        <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a>       </div>    </div>  </div>

their documentation of button-triggered modals may further.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more