jquery - Bootstrap modal does show correctly -

-

i trying show modal window on demand click of button.

in <head>...</head> tags, have following:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous">

in <body>...</body> have following definition of modal markup:

<div id="slideinfomodal" class="modal fade" role="dialog">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">&times;</button>                 <h4 id="slideinfotitle" class="modal-title">modal title</h4>             </div>             <div id="slideinfobody" class="modal-body">                 <p>some text in modal.</p>             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">close</button>             </div>         </div>     </div> </div>

my javascript button click handler looks this:

// method show current slide info $(document).ready(function() {     $('#slideinfo').click(function() {         $('#slideinfomodal').modal();     }); });

when code runs, modal appears this:

enter image description here

it's supposed (as per tutorial):

enter image description here

any idea why looks wrong?

i have following custom css stylesheet loaded: http://pastebin.com/6f9susiv

could of breaking bootstrap modal? these styles required page working with.

i made working code snippet of code in question, , works both , without pastebin css.

without jquery link, there no modal functionality @ all.

the image of non-working modal included in question suggests css problem. perhaps code snippet helpful in finding solution.

$(document).ready(function() {    $('#slideinfo').click(function() {      $('#slideinfomodal').modal();    });  });
html { height: 100% }          body { height: 100%; margin: 0; padding: 0; position: relative; }          #imageview { height: 100%; background-size: cover; display: none; }          #progressviewdisplay { padding: 10% 60px 20px 60px; text-align: center; font-family: arial; font-size: 36px; }  		#slideshowcontrols { position: absolute; top: 10px; right: 20px; width: 100%; height: 60px; line-height: 60px; text-align: right; display: none; }    .meter {      height: 40px;      position: relative;      margin: 0 60px 60px 60px;      background: #ccc;      -moz-border-radius: 25px;      -webkit-border-radius: 25px;      border-radius: 25px;      padding: 10px;      -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);      -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);      box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);  }  .meter > span {      display: block;      height: 100%;      -webkit-border-top-right-radius: 8px;      -webkit-border-bottom-right-radius: 8px;      -moz-border-radius-topright: 8px;      -moz-border-radius-bottomright: 8px;      border-top-right-radius: 8px;      border-bottom-right-radius: 8px;      -webkit-border-top-left-radius: 20px;      -webkit-border-bottom-left-radius: 20px;      -moz-border-radius-topleft: 20px;      -moz-border-radius-bottomleft: 20px;      border-top-left-radius: 20px;      border-bottom-left-radius: 20px;      background-color: rgb(43, 194, 83);      background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));      background-image: -moz-linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);      -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);      -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);      box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);      position: relative;      overflow: hidden;  }  .meter > span:after,  .animate > span > span {      content: "";      position: absolute;      top: 0;      left: 0;      bottom: 0;      right: 0;      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));      background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);      z-index: 1;      -webkit-background-size: 50px 50px;      -moz-background-size: 50px 50px;      background-size: 50px 50px;      -webkit-animation: move 2s linear infinite;      -moz-animation: move 2s linear infinite;      -webkit-border-top-right-radius: 8px;      -webkit-border-bottom-right-radius: 8px;      -moz-border-radius-topright: 8px;      -moz-border-radius-bottomright: 8px;      border-top-right-radius: 8px;      border-bottom-right-radius: 8px;      -webkit-border-top-left-radius: 20px;      -webkit-border-bottom-left-radius: 20px;      -moz-border-radius-topleft: 20px;      -moz-border-radius-bottomleft: 20px;      border-top-left-radius: 20px;      border-bottom-left-radius: 20px;      overflow: hidden;  }  .animate > span:after {      display: none;  }  @-webkit-keyframes move {      0% {          background-position: 0 0;      }      100% {          background-position: 50px 50px;      }  }  @-moz-keyframes move {      0% {          background-position: 0 0;      }      100% {          background-position: 50px 50px;      }  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-flw2n01lmqjakbkx3l/m9eahuwpsfenvv63j5ezn3uzzapt0u7eysxmjqv+0en5r" crossorigin="anonymous">    <div id="slideinfomodal" class="modal fade" role="dialog">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">&times;</button>          <h4 id="slideinfotitle" class="modal-title">modal title</h4>        </div>        <div id="slideinfobody" class="modal-body">          <p>some text in modal.</p>        </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">close</button>        </div>      </div>    </div>  </div>  <button id="slideinfo">show</button>


Comments

Post a Comment

Popular posts from this blog

ios - Memory not freeing up after popping viewcontroller using ARC -

-
hi project arc based, using uinavigationcontroller make transition between viewcontroller. using profiler analyse happening behind scene memory. noticed when push viewcontroller allocate memory components , when pop not freeing allocated memory. since using arc unable implement dealloc or release component. have analysed in detail , there no memory leak in project. i not using strong property push viewcontroller. here how pushing viewcontroller. viewcontroller *obj = [[viewcontroller alloc] init]; [self.navigationcontroller pushviewcontroller:obj animated:no]; any clue whats going on? should free memory have consumed. please advise your description indicates have retain cycle, leads objects not being deallocated. typical source of retain cycles properties assigned loading nib files (usually declared iboutlet ). two strategies break them , release objects: declare property weak : @property (nonatomic, weak) iboutlet uilabel *statuslabel; set property nil in...
Read more

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more