Bootstrap modal.js for browser confirm box.

kntmrkm commented 10 years ago

Hello. Thank you for your cool plugin!

I have a problem in below env.

Rails 4.1.1
Bootstrap 3.1.1 (gem)
Slidebars 0.9.4 (via bower)
twitter-bootstrap-rails-confirm 1.0.2 (gem)

I tried use in rails project. Normal modal is works well by this link http://plugins.adchsm.me/slidebars/issues/modal.php

but, when I use "twitter-bootstrap-rails-confirm". I found problem. (sorry, it may not this plugin's problem.)

The gem (twitter-bootstrap-rails-confirm) generate confirm box like a BS modal by JS. When click the cancel button in confirm box. Gray shadow appears. and won't operate.

I attach images. ex1 ex2 ex3

raw code is below.

<button class="btn btn-default btn-block" data-target="#modal-example" data-toggle="modal" name="button" type="submit">show modal
</button>
<!-- Modal -->
<div aria-hidden='true' aria-labelledby='periodModal' class='modal fade' id='modal-example' role='dialog' tabindex='-1'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button area-hidden='true' class='close' data-dismiss='modal' type='button'>&times;</button>
        <h3 class='modal-title' id='periodModal'>title</h3>
      </div>
      <div class='modal-body'>

          <a data-confirm="sure?" href="/">root</a>

      </div>
      <div class='modal-footer'>
        <button class='btn btn-default' data-dismiss='modal' type='button'>close</button>
      </div>
    </div>
  </div>
</div>

HTML generate by twitter-bootstrap-rails-confirm


<div xmlns="http://www.w3.org/1999/xhtml" class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title"> </h4>
  </div>
  <div class="modal-body">sure?</div>
  <div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn cancel btn-default">キャンセル</a>
    <a href="#" class="btn proceed btn-danger btn-primary">OK</a>
  </div>
</div>

sorry my english.

adchsm commented 10 years ago

Hi Kenta,

Your English is great, certainly better than my second languages :)

I think the generated code, my just be placed in a location which collides with Slidebars (why normal modals require a css hack).

Do you have a demo url I can see? I might be able to figure out a fix for it. If you don't want to post it here, you can always send me the link to adam@adchsm.me.

Thanks,

Adam

kntmrkm commented 10 years ago

Hi Adam. thank for reply.

ok, I have made a demo page. here http://rails4-1.herokuapp.com/.

and, source repo is here. https://github.com/kntmrkm/rails4.1

best regards.

kntmrkm commented 10 years ago

and,

Do you know sidr.js ? this plugin works in same situations. This information may not helpful. just in case.

adchsm commented 10 years ago

Hey,

It seems that when the cancel button is clicked, its removing the .model-open class from the body, which is stopping the css hack from working.

Can you try the second method? Try putting your Modal outside of #sb-site, and as a direct child of the <body>.

Thanks, Adam

kntmrkm commented 10 years ago

I have checked confirm gem's source. but, I couldn't found part that remove "modal-open" class. https://github.com/bluerail/twitter-bootstrap-rails-confirm/blob/master/vendor/assets/javascripts/twitter/bootstrap/rails/confirm.coffee

About second method. I want to generate many modal record like below.

ul
  li "record content + modal"
  li "record content + modal"
  li "record content + modal"

so, I can't move out Modal outside of #sb-site. mmmmm....

kntmrkm commented 10 years ago

and.

I tried Confirm like a BS by this plugin. because, The problem's reason may "twitter-bootstrap-confirm-rails". http://myclabs.github.io/jquery.confirm/

but, same issue happend.

kntmrkm commented 10 years ago

I tried without slidebars.css ( this case is works well). but, "modal-open" class is removed. and it works well.

The case's code is

<body style="" class="">
<div style="min-height: 756px;" id="sb-site">
<a class="sb-toggle-left" href="#"><button class="btn btn-primary btn-lg">
  <span>open slidebars</span>
</button>
</a>
・・・・・

kntmrkm commented 10 years ago

sorry many posts.

I tried other way. I have removed one code from slidebars.css.

#sb-site {
    width: 100%;
    //position: relative; //remove here
    z-index: 1; /* Site sits above Slidebars */
    background-color: #ffffff; /* Default background colour, overwrite this with your own css. */
}

Then, It works well. but, I opened slidebars once.

From next time, It is not work. same Problem happend.

I think "position" attributes problem.

After. I removed all css. Nevertheless, problem happend after slidebars opend. (before open it works well about this problem.)

kntmrkm commented 10 years ago

Finally, I found part of problem(but limited to my problem).

I tried change slidebars code.

１. slidebars.css remove "position: relative";. then, Modal works.

#sb-site {
    width: 100%;
    //position: relative;
    z-index: 1; /* Site sits above Slidebars */
    background-color: #ffffff; /* Default background colour, overwrite this with your own css. */
}

２. slidebars.js remove below. selector.css('transform', 'translate(' + amount + ')');

                       // Apply Animation
            if (animation === 'translate') {
                //selector.css('transform', 'translate(' + amount + ')');
            } else if (animation === 'side') {
                if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for side animations.
                selector.css(side, amount);
                setTimeout(function() {
                    if (amount === '0px') {
                        selector.removeAttr('style');

Then, After slidebars opend. Modal works.

Offcourse, I don't understand all code. so, It must wrong fix. I can't investigate more, because my javascript is very weak. sorry....

adchsm commented 10 years ago

Hey,

Yes your right, the problem is occurring because of the relative positioning.

You can't remove the line:

selector.css('transform', 'translate(' + amount + ')');

As that will stop Slidebars from working on about 90% of browsers.

You could try this, put it after slidebars.css.

#sb-site {
    position: static;
    z-index: auto;
}

.sb-slidebar {
    z-index: -1;
}

Let me know if that works.

Thanks, Adam

adchsm commented 10 years ago

Actually that stops scrolling on the Slidebars!

Ok I think I have a solution.

1) Try the development version from the master.

2) Add this css to your own stylesheet after you include slidebars.css (I don't recommend changing the actual plugin files).

#sb-site {
    position: static;
    z-index: auto;
}

And change your animation type to push. Add class .sb-style-push to your Slidebars markup.

<div class="sb-slidebar sb-left sb-style-push"></div>

Using the push style doesn't require the site to sit above the Slidebars, so you don't need the relative positioning or z-index.

Let me know if that works.

Thanks, Adam

kntmrkm commented 10 years ago

OK, Adam.

I tried.

Result is very fine.

It works without this link's hack. http://plugins.adchsm.me/slidebars/issues/modal.php
It works with a class "sb-style-overlay" too. ( of course, sb-style-push is ok.)
It works with version 0.9.4 too. only ↓

#sb-site {
    position: static;
    z-index: auto;
}

Thank you for quick solution.

I'm looking forward to next awesome version.

Thanks again.

Kenta.

adchsm commented 10 years ago

Glad to hear you got it working :)

adchsm / Slidebars

Bootstrap modal.js for browser confirm box. #91